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

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

?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>

?

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

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

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

?

??? 標(biāo)簽和復(fù)選框現(xiàn)在都對齊了。但是每個段落的默認(rèn)空白是垂直空間太大，那么我們怎么辦呢？我們可以減少段落的頂部空白和底部空白：

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

??? 現(xiàn)在有了一個復(fù)雜的表單布局?；颈韱螛邮截?fù)責(zé)一般的布局，然后可以通過覆蓋這些樣式分別處理例外情況。好了，寫到這里吧，感謝“think_fish ”和“pulihe”兩位的意見，我會注意，以后改進(jìn)！

?

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

轉(zhuǎn)載于:https://www.cnblogs.com/jiawl/archive/2011/06/07/2074616.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。