用ul标签来实现四行三列“表格式”布局_Div+CSS教程
教程Tag:暂无Tag,欢迎添加,赚取U币!
点击运行此代码,即可以看到效果。
虽然从技术上ul可以实现此效果。但我们不建议这样做。
在XHTML中,表格式的数据,应该还是以table来实现。
web标准,强调的是内容与表现的分离,并不是说完全弃用table,只是在布局方式上,应用div css。
碰到表格式数据,推荐依然用表格来实现。可以在css中,对表格的样式进行定久。
假如内容过多,出现走位的现象,可以用此方法来解决:
将li设置为块元素,并限制其高度与宽度,设置溢出为隐藏。:)
代码调试框 [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;
}
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教程:
- 相关链接:
- 教程说明:
Div+CSS教程-用ul标签来实现四行三列“表格式”布局。