Question

我使用新的Jsfidle更新此内容，以显示最大宽度为300px的问题。

在响应式设计中，我需要在单选按钮前添加“span”标签，以便将输入内容与我的自定义复选框背景对齐。

To review the issue, reduce the windows browser until an option is displayed on two lines

HTML

<ul id="sectors">
<li id="title"><p class="f32l32">Sectors</p></li>
<li>
    <label class="search-radio-button f15l18">
        <input value="61" name="sectors[]" type="radio" class="radio sectors-radio-button"> Built environment
        <span class="Built environment"></span>             
    </label>
</li>
            <li>
    <label class="search-radio-button f15l18">
        <input value="62" name="sectors[]" type="radio" class="radio sectors-radio-button"> Defence &amp; government
        <span class="Defence &amp; government"></span>              
    </label>
</li>
            <li>
    <label class="search-radio-button f15l18">
        <input value="63" name="sectors[]" type="radio" class="radio sectors-radio-button"> Manufacturing &amp; technology
        <span class="Manufacturing &amp; technology"></span>                
    </label>
</li>
            <li>
    <label class="search-radio-button f15l18">
        <input value="64" name="sectors[]" type="radio" class="radio sectors-radio-button"> Oil, energy &amp; mining
        <span class="Oil, energy &amp; mining"></span>              
    </label>
</li>
            <li>
    <label class="search-radio-button f15l18">
        <input value="65" name="sectors[]" type="radio" class="radio sectors-radio-button"> Transport
        <span class="Transport"></span>             
    </label>
</li>
            <li>
    <label class="search-radio-button f15l18">
        <input value="66" name="sectors[]" type="radio" class="radio sectors-radio-button"> Utilities &amp; infrastructure
        <span class="Utilities &amp; infrastructure"></span>                
    </label>
</li>

CSS

   ul#sectors, ul#locations {
display: inline-block;
padding-bottom: 2.5%;
}

#detail-search-container li#title {
width: 100%;
display: inline-block;
padding-bottom: 5%;
padding-top: 6%;
}

#detail-search-container li {
min-height: 20px;
width: 50%;
float: left;
display: inline-block;
}

#detail-search-container li label {
padding-left: 20px;
display: inline-block;
padding-left: 20%;
width: 80%;
}

.search-radio-button span {
width: 20px;
width: 22px;
height: 22px;
float: left;
background: url("http://satafx.com/img/radio.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
margin-top: -3px;
display: inline-block;
margin-left: -20%;
}

.search-radio-button input {
display: none;
}

.search-radio-button input:checked + span, .class_checkbox.checked {
background-position: 0px -20px;
background-position: 0px -26px;
}

Answer 1

我已经对你的CSS进行了一些修饰，因为我在下面提到了评论。

1）删除background-position:

.search-radio-button input:checked + span, .class_checkbox.checked {
   background-position: 0px -20px;
   background-position: 0px -26px; // remove this
}

2）依次设置margin-top和left

.search-radio-button span {
   width: 20px;
   width: 22px;
   height: 22px;
   float: left;
   background: url("http://satafx.com/img/radio.gif");
   background-repeat: no-repeat;
   margin-bottom: 10px;
   margin-top: 0; //change this
   display: inline-block;
   margin-left: -9%; //change this
}

Fiddle Demo

Updated Fiddle

希望你想要这样！

Answer 2

如果我理解正确，我只需要在输入之前放置跨度......

<li>
    <label class="search-radio-button f15l18">
        <span class="Built environment"></span>             
        <input value="61" name="sectors[]" type="radio" class="radio sectors-radio-button"> Built environment
    </label>
</li>

我希望这就是你要找的......

将自定义单选按钮与顶部选项内容对齐

2 个答案: