1个例子搞定div css li 多列显示?海底苍鹰(tank)博客

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
div.related_post { #这个可要，可不要，因为ul会把div给撑开的
width:100%;
float:left;
}
div.related_post ul{
width:100%; #定义ul的完度
list-style-type:circle #显示的时候为空心圆
}
div.related_post li{
width:50%; #如果要显示二列呢，width设置成50%，如果三列呢，33%，四列呢，25%
float:left; #居左
#list-style-type:none; #list-style-type:none;可以隐藏左边的空心圆
#display:block; #display:block;也可以隐藏左边的空心圆
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="http://blog.51yip.com/mysql/1159.html" title="mysql命令行下用户管理">mysql命令行下用户管理 </a></li>
<li><a href="http://blog.51yip.com/mysql/1157.html" title="添加mysql索引的3条原则">添加mysql索引的3条原则 </a></li>
<li><a href="http://blog.51yip.com/other/1155.html" title="好程序员应有的9种素质">好程序员应有的9种素质 </a></li>
<li><a href="http://blog.51yip.com/php/1153.html" title="php程序员应具有的7种能力">php程序员应具有的7种能力 </a></li>
<li><a href="http://blog.51yip.com/shell/1151.html" title="awk中RS,ORS,FS,OFS区别与联系">awk中RS,ORS,FS,OFS区别与联系 </a></li>
<li><a href="http://blog.51yip.com/linux/1141.html" title="centos fluxbox 安装,个性化配置">centos fluxbox 安装,个性化配置 </a></li>
</ul>
</div>
</body>
</html>

前面说到li的宽度时width:50%; 最好用百分比来显示，这样更好一点，如果用px来定义的话，还要计算比较麻烦。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。