用div和ul标签画表格进行布局兼容火狐、ie6、ie7、Opera等浏览器

炎热的夏天过去了,凉爽的秋天来了。它是一个收获的季节,也是各种水果最多的时候,红艳艳的苹果扒开绿叶往外瞧;小红灯笼似的枣子挂满枝头;像紫玛瑙的葡萄一串串地挂在葡萄架下,真迷人呀!
复制代码
代码如下:

<html>
<head>
<style>
<!--
#table {
width:701px!important;
width:700px;
border-top:1px #000 solid;
}
#table ul {
margin:0px;
padding:0px;
width:701px!important;
width /**/:700px;
list-style-type:none;
border-bottom:0px #000 solid;
border-left:0px #000 solid;
}
#table li {
float:left;
display:block;
margin:0px;
padding:0px;
width:139px!important;
width:139px;
width /**/:140px;
border-right:1px #000 solid;
border-bottom:1px #000 solid;
}
-->
</style>
</head>
<body>
<center>
用div和ul标签画表格进行布局兼容火狐、ie6、ie7、Opera等浏览器
<div id="table" style="margin-left:auto; margin-right:auto; text-align:center">
<ul style="background-color:Silver; color:red">
<li style="border-left:1px #000 solid;">项目编号</li>
<li style="letter-spacing:3pt">网址</li>
<li>名称</li>
<li>从事业务</li>
<li>联系电话</li>
</ul>
<ul>
<li style="border-left:1px #000 solid;">1</li>
<li>www.haodaima.com</li>
<li><a rel="nofollow noopener noreferrer" href="https://www.haodaima.com"></a></li>
<li>400电话申请</li>
<li>4006-1234-10</li>
</ul>
<ul>
<li style="border-left:1px #000 solid;">2</li>
<li >www.haodaima.com</li>
<li><a rel="nofollow noopener noreferrer" href="https://www.haodaima.com"></a></li>
<li>中文搜索</li>
<li>无</li>
</ul>
<ul>
<li style="border-left:1px #000 solid;">3</li>
<li>www.baidu.com</li>
<li><a rel="nofollow noopener noreferrer" href="http://www.baidu.com">百度 </a></li>
<li>新闻娱乐体育</li>
<li>无</li>
</ul>
</div>
</center>
</body>
</html>

以上就是用div和ul标签画表格进行布局兼容火狐、ie6、ie7、Opera等浏览器。明天的但愿,让我们忘了今天的痛苦。更多关于用div和ul标签画表格进行布局兼容火狐、ie6、ie7、Opera等浏览器请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
修改UL和LI间隔的简单方法

ul li内容宽度的问题的如何解决方案

ul设置列表为一行2条的方法

ul li列表中显示文字强制不换行大于li宽度的文字自动隐藏

ul和li如何实现分两列(多列)布局显示