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

As you can see in the image below then when the browser window is resized the checkbox labels can wrap to the opposite side of their ascociated checkboxes.
防止复选框标签被包装到页面的另一边
In the image above the label for checkbox 12 has wrapped and is at the opposite side of the screen. How can I make it so that each label stays with its checkbox?

正如您在下图中看到的那样，当浏览器窗口调整大小时，复选框标签可以包装到它们的ascociated复选框的反面。在上面的图像中，复选框12的标签已经包装好，并且在屏幕的另一边。我怎样才能使每个标签都保留在它的复选框中呢?

2 个解决方案

#1

Put the checkboxes in the label tags and give the label display: inline-block. Texts can be of any size, the "inline-block" keeps the text and checkbox together.

将复选框放入标签中，并显示标签:inline-block。文本可以是任何大小，“内联块”将文本和复选框放在一起。

Demo (Resize your browser so 14 goes to the next line): http://jsfiddle.net/csYPu/

演示(调整浏览器大小，以便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

I would group the label and the checkbox in an element (li, div) and float them left.

我将在元素(li, div)中对标签和复选框进行分组，并将它们向左浮动。

Example:

例子:

css

css

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

html

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