用ul标签来实现四行三列“表格式”布局_Div+CSS教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!
点击运行此代码,即可以看到效果。

代码调试框 [www.mb5u.com]

[ 可先修改部分代码 再运行查看效果 ]

虽然从技术上ul可以实现此效果。但我们不建议这样做。
在XHTML中,表格式的数据,应该还是以table来实现。
web标准,强调的是内容与表现的分离,并不是说完全弃用table,只是在布局方式上,应用div css。
碰到表格式数据,推荐依然用表格来实现。可以在css中,对表格的样式进行定久。

假如内容过多,出现走位的现象,可以用此方法来解决:

示例代码 [www.mb5u.com]
ul li{
display:block;
float:left;
list-style-type:none;
border-top:#000 solid 1px;
border-left:#000 solid 1px;
width:65px;
height:28px;
overflow:hidden;
}

将li设置为块元素,并限制其高度与宽度,设置溢出为隐藏。:)

来源:无忧整理//所属分类:Div+CSS教程/更新时间:2007-01-03
相关Div+CSS教程