首页>>教学>>网页技巧>>Web2.0教程>>正文

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 全部选择 提示：你可先修改部分代码，再按运行]

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定的宽度就会自动

换行。