当内容包含在流布局中时,如何将单选按钮或复选框及其标签保持在一起

Question

当浏览器窗口变窄时,如何在文本换行时将单选按钮()或复选框[]及其标签保持在一起,这样我们就不会得到这样的结果:

          [ ] pepperoni   [ ] anchovies   [ ] mushrooms    [ ]
          olives

编辑以回应nowrap建议.谢谢你的建议.差不多了.它适用于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>

在IE9中 TD变为固定宽度; 当浏览器窗口变窄时,TD不会收缩,我明白了:

         ( ] pepperoni   ( ) anchovies   ( ) mushrooms   ( )  olives

当我需要这个时:

          ( ) pepperoni   ( ) anchovies   
          ( ) mushrooms   ( ) olives

IE9还有其他技巧吗？我尝试在标签之间放置一个包含单个空格的范围: ...</label><span> </span><label>...但这不起作用.

Answer 1

用<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 -->

Answer 2

您可以将输入和标签<span>包装在一个或将输入包装在标签内.无论哪种方式,外部容器(跨度或标签)应该具有样式white-space:nowrap; display:inline-block.这适用于IE9以及其他浏览器.所以你的最终标记应该是:

<span style="white-space:nowrap; display:inline-block"> 
  <input type="checkbox" name="pizza" checked="true"
   id="pepperoni" value="pepperoni" /> 
  <label for="pepperoni">pepperoni</label>
</span>

要么

<label style="white-space:nowrap; display:inline-block">
  <input type="checkbox" name="pizza" checked="true" 
   id="pepperoni" value="pepperoni"/>
  pepperoni
</label>