防止复选框标签包裹到页面的反面

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>