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

Posted 2023-03-05

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

【英文标题】：how to keep radio-button or checkbox and its label together when content wraps in flow layout

【发布时间】：2013-01-17 19:16:00

【问题描述】：

当浏览器窗口变窄时文本换行时，如何将单选按钮 ( ) 或复选框 [ ] 及其标签保持在一起，这样我们就不会遇到这种情况：

          [ ] 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>...，但这不起作用。

【参考方案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 -->

【讨论】：

<label><input type="textbox">xxx</label> 怎么样？干净得多

@xiaoyi：谢谢。在 IE9 中无法正常工作。请查看已编辑的问题。

现在它根本不会刹车！ OP 想要打破界限，但不是在收音机和它的标签之间！

在 php 中： echo "xxx ";注意最后的空间。它只有在有空格的情况下才有效，有点奇怪（因为空格在标签标签之外）。

@Rodrigo 如果没有空格，html 解析器看起来就像一个长单词。因此它不会插入任何中断。与空格一起显示为几个不同的单词，可以移动到下一行。

【参考方案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>

【讨论】：

这对我有用！我将这两种样式应用于样式表中的“标签”，瞧！ “空白：nowrap；”单独不起作用，但添加 display:inline-block;" 也成功了！漂亮！:)