XHTML+CSS方法:妙用外溢 完成间隔两列目录

2020-12-31


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,见到这儿,相信大伙儿说起,我觉得是太简易了没有?谁都了解的事儿啊。嗯,是那样的,那麼大家再向下说。

假如大家规定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和间距。

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




扫描二维码分享到微信

在线咨询
联系电话

400-888-8866