ul和li简单语句实现DIV+CSS分两列(多列)布局显示

显然:UL+LI在布局上比table灵活得多。

比较分两列或者多列显示:

table:你需要在服务器上写一大堆代码判断是不是需要换行,或者切分是不是准确

DIV:你只需要定义好css,剩下的做事情叫交给浏览器吧。

最简单的代码:

 

XML/HTML代码
<style type="text/css">  
.mycode
{ width:300px; height:74px; float:left;}
.mycode ul
{ width:280px;}
.mycode li
{ width:100px; float:left; display:block;}
</style>
<div class="mycode">
<ul>
<li>博客小子</li>
<li>博客小子</li>
<li>博客小子</li>
<li>博客小子</li>
<li>博客小子</li>
<li>博客小子</li>
</ul>
</div>


不用多说,这个是最精简的代码,请根据你需要修改!

转载请注明来自博客小子,谢谢。

效果:

大小: 5.34 K
尺寸: 272 x 94
浏览: 154 次
点击打开新窗口浏览全图

转自: http://www.blogguy.cn/show-416-1.html

posted @ 2011-09-16 22:51  Lux.Y  阅读(1704)  评论(2编辑  收藏  举报