Question

在radio / checkbox输入下没有标签文本换行的最简洁，最简单的方法是什么。该解决方案应该在所有浏览器中以流畅/响应式布局工作，并且最好是向后兼容的。我在下面提供了一个JSFiddle。

HTML CODE

<ul>
  <li>
    <input name="item1" id="item1" type="checkbox">
    <label for="item1">
        Select this if the answer is yes<br/> 
        <span>1111111111111</span>
    </label>
  </li>        
  <li>
    <input name="item2" id="item2" type="checkbox">
    <label for="item2">
        Select this if the answer is maybe<br />
        <span>1111111111112</span>
    </label>
  </li>             
  <li>
    <input name="item3" id="item3" type="checkbox">
    <label for="item3">
        Select this if the answer is no<br />
        <span>1111111111113</span>
    </label>
  </li>
</ul>

CSS CODE

ul{
    list-style:none;
    margin:0;
    padding:0;
}

li{
    margin-bottom:10px;
}

Answer 1

http://jsfiddle.net/897vc9gx/1/

HTML CODE

<ul>
<li>
    <input name="item1" id="item1" type="checkbox">
    <label for="item1">
        Select this if the answer is yes<br/> 
        <span>1111111111111</span>
    </label>
</li>        
<li>
    <input name="item2" id="item2" type="checkbox">
    <label for="item2">
        Select this if the answer is maybe<br />
        <span>1111111111112</span>
    </label>
</li>             
<li>
    <input name="item3" id="item3" type="checkbox">
    <label for="item3">
        Select this if the answer is no<br />
        <span>1111111111113</span>
    </label>
</li>
</ul>

CSS CODE

ul{
list-style:none;
margin:0;
padding:0;
}

li{
margin-bottom:10px;
}

input{
float:left;
margin-right:10px;
}

label{
overflow:auto;
display:block;
}

如何在radio / checkbox输入下没有标签文本换行？

1 个答案: