防止複選框標籤包裹到頁面的反面

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>