html - 自定义单选按钮填充

Question

我正在尝试做一个自定义单选按钮，我在互联网上找到了一些代码，并对其进行了自定义。问题是，我需要在标签中向左/向右填充 20px，并且我需要将最小宽度保持在 110px，并且 li 宽度不包含内容...

如果你想看，他是我的代码。

.ui-radio {
    margin:25px 0 0 0;
    padding:0;
}

.ui-radio li {
    float:left;
    margin:0 20px 0 0;
    min-width:110px;
    height:40px;
    position:relative;
    list-style-type: none;
}

.ui-radio label, .ui-radio input {
   display:block;
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
}

.ui-radio input[type="radio"] {
   opacity:0;
   z-index:100;
}

.ui-radio input[type="radio"]:checked + label {
   border-bottom: solid 4px BLUE;
}

.ui-radio label {
    padding:5px;
    cursor:pointer;
    z-index:90;
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);
    padding:0 20px;
    line-height:30px;
    border-radius:2px;
}

.ui-radio label:hover {
    background:#DDD;
}

<ul class="ui-radio">
        <li>
            <input type="radio" id="choice1" name="personnel" />
            <label for="choice1">Long_choice_1</label>
        </li>
        <li>
            <input type="radio" id="choice2" name="personnel" />
            <label for="choice2">choice_2</label>
        </li>
</ul>

标签： htmlcss

Answer 1

position: absolute;从中删除.ui-radio label, .ui-radio input。

绝对定位导致项目的父项不知道内容大小，这就是内容溢出的原因。