web前端——讓人頭疼的多列複選框排列解決辦法

    為大多的複選框組或選項按鈕組建立兩列的布局有點複雜。標籤只能用於各個元素，而不能用於元素組。理想情況下，我們將整個組在一個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轉載請自覺附上轉載地址，來自部落格園“明年開奧迪”)