当文本包围浏览器窗口缩小时,如何将单选按钮()或复选框[]及其标签合在一起,这样我们就不会这样做：
[ ] pepperoni [ ] anchovies [ ] mushrooms [ ]
olives
编辑回应现在的建议.感谢您的建议.差不多了.它在Chrome,FF和Opera中完美地工作,但不是在IE9中.当页面CSS为label {white-space：nowrap}时,标记为：
<td>
<div>
<label>
<input type="radio" name="pizza" checked="true"
id="pepperoni" value="pepperoni" />pepperoni </label>
<label>
<input type="radio" name="pizza"
id="anchovies" value="anchovies" />anchovies </label>
<label>
<input type="radio" name="pizza"
id="mushrooms" value="mushrooms" />mushrooms </label>
<label>
<input type="radio" name="pizza"
id="olives" value="olives" />olives </label>
</div>
</td>
TD在IE9中变为固定宽度;当浏览器窗口变窄时,TD不会缩小,我得到：
( ] pepperoni ( ) anchovies ( ) mushrooms ( ) olives
当我需要这个：
( ) pepperoni ( ) anchovies
( ) mushrooms ( ) olives
IE9有什么额外的技巧吗？我尝试在标签之间放置一个包含一个空格的跨度：…< / label>< span> < / span>< label> …但是没有工作.
解决方法
环绕着< span>容器并设置
white-space: nowrap;上.
<span style="white-space: nowrap;"> <input type="checkBox" id="in1" /> <label for="in1">pepperoni</label> </span> <span style="white-space: nowrap;"> <input type="checkBox" id="in2" /> <label for="in2">anchovies</label> </span> <span style="white-space: nowrap;"> <input type="checkBox" id="in3" /> <label for="in3">mushrooms</label> </span> <span style="white-space: nowrap;"> <input type="checkBox" id="in4" /> <label for="in4">olives</label> </span>
编辑
如@xiaoyi所述,您还可以使用< label>本身作为容器：
<label style="white-space: nowrap;"> <input type="checkBox" /> pepperoni</label> <!-- etc -->
