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

欢迎您访问我爱IT技术网，今天小编为你分享的电脑教程是建站经验系列之：【XHTML+CSS技巧：巧用溢出 实现间距多列列表】，下面是详细的分享！

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

　　在网页设计中经常需要制作多列列表，而在table的设计中列表是很好制作的。那么，在div+css中我们如何来制作多列列表呢?首先，我们来看一下一个简单的列表的代码如下：

　　< div id=" list " >

　　< ul >

　　< li > < / li >

　　< li > < / li >

　　< li > < / li >

　　< /ul >

　　< /div >

　　好了，假设我们需要制作一个宽度为300px，每个li为100像素的三列列表。那么css样式如下：

　　

　　#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和间隔。

　　通过这样的曲线做法，就巧妙的完成了我们想要的效果。其实，隐藏溢出有很多很多的妙用，撰文只为抛砖引玉。

以上所分享的是关于XHTML+CSS技巧：巧用溢出 实现间距多列列表，下面是编辑为你推荐的有价值的用户互动：

　　相关问题：css中如何设置列表项的上下间距？急急急！

　　答： 无标题文档 ul{ margin:0; padding:0} ul li{ margin:0; padding-top:5px;} 河北 河南 山东 >>详细

　　相关问题：利用css div 如何实现文字多行多列对齐？多行多列...

　　答：用 给个margin就行了。 >>详细

　　相关问题：用wps做成的表格，如何多列一起调整列间距

　　答：方法一： 1、选中需要调整列宽的列； 2、将光标放在列标处，当鼠标指针变为双箭头时，按下并拖动鼠标，即可一起调整选中列的列宽。 方法二： 1、选中需要调整列宽的列； 2、单击鼠标右键，在弹出的快捷菜单上选择列宽命令，如图所示； 3、弹出列... >>详细