XHTML+CSS技巧：巧用溢出 實現間距多列清單

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

在網頁設計中經常需要製作多列清單，而在table的設計中清單是很好製作的。 那麼，在div+css中我們如何來製作多列清單呢?首先，我們來看一下一個簡單的清單的代碼如下：

< div id = " list " >

< ul >

< li > < / li >

< li > < / li >

< li > < / li >

< /ul >

< /div >

好了，假設我們需要製作一個寬度為300px，每個li為100圖元的三列清單。 那麼css樣式如下：

/* 在css頭部已經規定所有元素的預設的內填充、外填充、邊框等均為0 */

#list {width:300px;}

#list li {width:100px; float:left;}

OK，看到這裡，我相信大家要說，這不是太簡單了嗎?誰都知道的事情啊。 嗯，是這樣的，那麼我們再往下說。

如果我們要求兩個li之間需要有10圖元的間隔。 怎麼辦?也就是說我們需要三個li之間加上兩個10圖元的間隔，而且要求在不改變html代碼的情況下。 要知道，如果我們規定li的右外填充(內填充也可以)就變成了三個10圖元的間隔而並非兩個。 怎麼辦呢?看如下css代碼：

#list {width:320px;overflow:hidden;}

#list ul {width:330px;}

#list li {width:100px; float:left;margin:0 10px 0 0;}

在這裡，我們控制div的寬度為320px，但在控制ul的時候卻控制了330px。 那麼不會撐開嗎?不會的。 因為我們使用了overflow:hidden;這個樣式控制，這個控制讓list這個div裡面的任何東西在超過他規定的寬度和高度會自動隱藏起來。 而我們控制ul的寬度為330px是為了能夠有足夠的寬度來容納li和間隔。

通過這樣的曲線做法，就巧妙的完成了我們想要的效果。 其實，隱藏溢出有很多很多的妙用，撰文只為抛磚引玉。 原文首發：HTTP://www.difangla.cn/XTML-CSS/4018502323.html