??? 為大多的復選框組或單選按鈕組創建兩列的布局有點復雜。標簽只能用于各個元素，而不能用于元素組。理想情況下，我們將整個組在一個fieldset中，并且使用legend作為這個組的標簽。不幸的是，由于瀏覽器處理legend的定位方式不一致，所以這在當前不是可行的解決方案。因此，在瀏覽器提供更一致的支持之前，最好的解決方式是使用標題元素。

??? 為了創建列效果，要講復選框分成兩組，每一組放在一個div中。然后將這兩個div元素放到一個具有描述性ID的fieldset中（當然，這個時候你也可以使用注釋）；如下列代碼：

?1?<fieldset?id="favoritecolor">
?2?<h2>Favorite?color：</h2>
?3?<div>
?4?<p><input?class="checkbox"?id="red"?name="red"?type="checkbox"?value="red"?/>
?5?<label>red</abel>
?6?</p>
?7?<p><input?class="checkbox"?id="red"?name="red"?type="checkbox"?value="red"?/>
?8?<label>red</abel>
?9?</p>
10?....
11?</div>
12?<div>
13?<p><input?class="checkbox"?id="orange"?name="orange"?type="checkbox"?value="orange"?/>
14?<label>orange</abel></p>
15?<p><input?class="checkbox"?id="orange"?name="orange"?type="checkbox"?value="orange"?/>
16?<label>orange</abel></p>
17?....
18?</div>
19?<br?class="clear">
20?</fieldset>

?

??? 因為已經創建了基本的fieldset樣式，所以首先需要覆蓋這些樣式，將填充和空白邊設置為0、去掉邊框將背景設置為透明,然后將標簽一樣向左浮動并且將寬度設置為10em。標題還需要看起來像標簽，所以需要將字體設置為normal并且減小字號。然后給div設置寬度，并且讓他們看起來是向左浮動，從而創建出兩列的布局，有代碼有真相：

?1?fieldset#favoritecolor{
?2?margin:0;
?3?padding:0;
?4?border:none;
?5?background:transparent;
?6?}
?7?#favoritecolor?div{
?8?width:8em;
?9?float:left;
10?}

??? 因為這些div進行浮動，他們就不再占據任何空間，因此出現在fieldset的外邊(不好意思，圖片死活傳不上來，這會整棟樓上網的人多，不好意思，等網速快點了再傳)。
??? 為了迫使fieldset包圍這些浮動元素，在第二個div后面插入了一個進行清理的元素，在這個示例使用一個<br />元素，它使用的選擇器是：clear：
??? .clear{clear:both;}(在div中也可以這樣使用的，都是同一個道理。)
??? 這個表單中的所有標簽向做浮動并且將寬度設置為10em。但是，復選框的標簽不需要浮動，而且寬度應該小得多。因此希望讓這些標簽的寬度變窄一點，以防止它們進行浮動。firefox似乎將不浮動的標簽當作塊元素對待，這使復選框轉到下一行。為了避免這個問題，需要顯示的將display屬性設置為inline，代碼如下：

1?#favoritecolor?label
2?{
3?width:3em;
4?float:none;
5?display:inline;
6?}

?

??? 標簽和復選框現在都對齊了。但是每個段落的默認空白是垂直空間太大，那么我們怎么辦呢？我們可以減少段落的頂部空白和底部空白：

1?????#favoritecolor?p{
2?margin:0.3em?0;
3?}

??? 現在有了一個復雜的表單布局。基本表單樣式負責一般的布局，然后可以通過覆蓋這些樣式分別處理例外情況。好了，寫到這里吧，感謝“think_fish ”和“pulihe”兩位的意見，我會注意，以后改進！

?

????? ? （喜歡學習的和想與我探討各種web知識的留下你的郵箱或聯系方式，或者跟我發郵件747850255@qq.com轉載請自覺附上轉載地址，來自博客園“明年開奧迪”)

轉載于:https://www.cnblogs.com/jiawl/archive/2011/06/07/2074616.html

總結

以上是生活随笔為你收集整理的web前端——让人头疼的多列复选框排列解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。