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

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;
}