高手求教请问下做一个4行3列的表格不用TABLE如何用ul li代码写

abc121147704 2012-07-25 12:23:39
高手求教请问下做一个4行3列的表格不用TABLE如何用ul li代码写
...全文
196 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
xiaomeimei_2011 2012-07-30
  • 打赏
  • 举报
回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title> New Document </title>
<style>
*{margin:0;padding:0;}
body{font-size:12px; background:#fff;}
span,em,i{font-style:normal;}
ul li{display:block; height:25px; line-height:25px; margin-bottom:5px;}
ul li span,ul li em,ul li i{display:inline-block; width:60px; height:30px;background:red;}
ul li em{background:green}
ul li i{background:yellow;}
</style>
</head>

<body >
<div class="">
<ul>
<li><span>第一列</span><em>第二列</em><i>第三列</i></li>
<li><span>第一列</span><em>第二列</em><i>第三列</i></li>
<li><span>第一列</span><em>第二列</em><i>第三列</i></li>
<li><span>第一列</span><em>第二列</em><i>第三列</i></li>
</ul>
</div>
</body>
</html>
lw5853103 2012-07-27
  • 打赏
  • 举报
回复
其实浮动的时候还是有很多问题的
主要是浏览器的兼容性问题 还有就是你的布局是固定的 还是流体的
建议你上网多看看有关列表浮动的文章会对你很有帮助
IE6/7 浮动bug最多 但是也是最容易解决的 因为高手们都已经总结出来了解决方案 你照着来就可以了
work_fei 2012-07-25
  • 打赏
  • 举报
回复
固定ul宽度高度,把li的宽度调成ul宽度的1/3,高度调成ul高度的1/4,li样式要左浮动
abc121147704 2012-07-25
  • 打赏
  • 举报
回复
谢谢 学习了

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧