XHTML+CSS技巧：巧用溢出 实现间距多列列表

圣康道生

在网页设计中经常需要制作多列列表，而在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和间隔。
    通过这样的曲线做法，就巧妙的完成了我们想要的效果。其实，隐藏溢出有很多很多的妙用，撰文只为抛砖引玉。原文首发：