今天才发现,本bolg的相关文章好丑,右边空出来好大一块,感觉空空的,我做了一点修改,以一个实例来说明
- <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来定义的话,还要计算比较麻烦。
我只想二列 width:50%; #如果要显示二列呢,width设置成50%,如果三列呢,33%,四列呢,25%
看一下本博客相关文章修改后的样子,晚上回去把修改的代码放到空间里面去:
相关文章
来源: http://blog.51yip.com/htmlcss/1163.html