html – 当内容包装在流布局中时,如何保持单选按钮或复选框及其标签

当文本包围浏览器窗口缩小时,如何将单选按钮()或复选框[]及其标签合在一起,这样我们就不会这样做：

[ ] 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 -->