防止复选框标签换行到页面的另一侧答案

【问题标题】：prevent checkbox label from wrapping to opposite side of page防止复选框标签换行到页面的另一侧
【发布时间】：2011-08-13 02:53:41
【问题描述】：

如下图所示，当调整浏览器窗口大小时，复选框标签可以换行到相关复选框的另一侧。

在复选框 12 的标签上方的图片中已包裹并位于屏幕的另一侧。我怎样才能使每个标签都保留在其复选框中？

【问题讨论】：

标签： html css checkbox label

【解决方案1】：

将复选框放在标签标签中并给出标签display: inline-block。文本可以是任意大小，“inline-block”将文本和复选框保持在一起。

演示（调整浏览器大小，使 14 转到下一行）：http://jsfiddle.net/csYPu/

HTML：

<label><input type="checkbox">1</label>
<label><input type="checkbox">2</label>
<label><input type="checkbox">3</label>

CSS：

label {
    display: inline-block;
}

【讨论】：

【解决方案2】：

我会将标签和复选框组合在一个元素中（li、div）并将它们向左浮动。

例子：

css

ul {
  overflow: hidden;
}
li {
  float: left;
}

html

<ul>
  <li><input type="checkbox" name="box1" id="box1" value="1"><label for="box1">1</label></li>
  ...
  <li><input type="checkbox" name="box13" id="box13" value="1"><label for="box13">13</label></li>
</ul>

【讨论】：

由于标签从 1 位增加到 3 位，因此不同大小的标签怎么办？我不需要指定宽度吗？
@inquisitive_web_developer 不，只要您浮动包含元素 - 就像我的示例中的 li - 它们会一直保持在一起，直到页面变得太小而无法在一行中容纳单个框和标签。
好的，感谢@jeroen，您的示例有效，但我确实喜欢@Bazzz 提供的方法，因为它更简单。