在单选/复选框输入下不让标签文本换行的最干净、最简单的方法是什么。该解决方案应该适用于所有浏览器的流畅/响应式布局,并且最好是向后兼容。我在下面提供了一个 JSFiddle。
HTML 代码
<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 代码
ul{
list-style:none;
margin:0;
padding:0;
}
li{
margin-bottom:10px;
}
最佳答案
http://jsfiddle.net/897vc9gx/1/
HTML 代码
<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 代码
ul{
list-style:none;
margin:0;
padding:0;
}
li{
margin-bottom:10px;
}
input{
float:left;
margin-right:10px;
}
label{
overflow:auto;
display:block;
}
关于html - 如何在单选/复选框输入下不让标签文本换行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25649135/