防止复选框标签包装到页面的另一侧

Question

正如您在下面的图片中看到的那样，当调整浏览器窗口大小时，复选框标签可以包裹到其相关复选框的另一侧。

在上图中，复选框12的标签已经包裹，位于屏幕的另一侧。如何使每个标签与其复选框保持一致？

Answer 1

将复选框放在标签标签中，并提供标签display: 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;
}

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