web2.0中通过li 列表信息怎么实现一行多列?

答案：
我们以前做信息列表的时候都是用表格来做
通过td来实现列表的多列信息先来看看原来表格的实现方法非常简单
运行代码框
<TABLE cellSpacing=0 cellPadding=0 width=100 border=1><TBODY><TR><TD> </TD><TD> </TD><TD> </TD></TR><TBODY></TBODY></TABLE>
 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
现在我们在web2.0中列表信息通过ul 和li来实现，但是这样的话我们怎么实现多列信息呢？
我经过一段时间的摸索，第一次我使用的方法是
方法一：
运行代码框
<UL style="DISPLAY: block; FLOAT: left"><LI>列表信息一</li><LI>列表信息一</li><LI>列表信息一</li><LI>列表信息一</li><LI>列表信息一</LI></UL><UL style="DISPLAY: block; FLOAT: left"><LI>列表信息一</li><LI>列表信息一</li><LI>列表信息一</li><LI>列表信息一</li><LI>列表信息一</LI></UL>
 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这样下面的ul就会飘到上面的右面但是这样的话程序员写信息的话很是不方便。
方法2
运行代码框
<DIV class=list-class><UL ><LI>列表信息一</li><LI>列表信息一</li><LI>列表信息一</li><LI>列表信息一</li><LI>列表信息一</LI><LI>列表信息一</li><LI>列表信息一</li><LI>列表信息一</li><LI>列表信息一</li><LI>列表信息一</LI></UL></DIV><style type="text/css"><!--.list-class { LINE-HEIGHT: 18px; TEXT-ALIGN: left; margin:10px 0 0 20px;}.list-class UL { padding:0px ;width:600px;}.list-class li { padding:2px 0px 2px 22px; width:250px; display:block; float:left;}}--></style>
 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

 
css
.list-class {
 LINE-HEIGHT: 18px; TEXT-ALIGN: left; margin:10px 0 0 20px;
}
.list-class UL {
 padding:0px ;width:600px;
}
.list-class li {
 padding:2px 0px 2px 22px; width:250px; display:block; float:left;
}
这里设定的ul的宽度就是列表总的宽度600px 相当于表格的宽度 ，Li 250px就是一列的宽度
相当于td的宽度。这里设定li漂浮到左边每条信息都会往左漂 宽度超过了ul定的宽度就会自动
换行。

上一个：Div+CSS+JS树型菜单，可刷新
下一个：标准下隔行换色的思考