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

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>

TD 在 IE9 中变为固定宽度；当浏览器窗口变窄时，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 -->