---

小视频，自媒体平台，达种族草一站服务

在网页页面设计方案中常常必须制作两列目录，而在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，见到这儿，相信大伙儿说起，我觉得是太简易了没有?谁都了解的事儿啊。嗯，是那样的，那麼大家再向下说。

假如大家规定2个li中间必须有10清晰度的间距。如何办?换句话说大家必须三个li中间再加2个10清晰度的间距，并且规定不在更改html编码的状况下。要了解，假如大家要求li的右外添充(内添充还可以)就变为了三个10清晰度的间距而并不是2个。如何办呢?看以下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和间距。

根据那样的曲线图作法，就恰当的进行了大家要想的实际效果。实际上，掩藏外溢有好多好多的妙用，发文只求毛遂自荐。全文先发：