复制代码代码如下:<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.jb51.net</li> <li><a href="http://www.jb51.net">脚本之家</a></li> <li>400电话申请</li> <li>4006-1234-10</li> </ul> <ul> <li style="border-left:1px #000 solid;">2</li> <li >www.jb51.net</li> <li><a href="http://www.jb51.net">脚本之家</a></li> <li>中文搜索</li> <li>无</li> </ul> <ul> <li style="border-left:1px #000 solid;">3</li> <li>www.baidu.com</li> <li><a href="http://www.baidu.com">百度 </a></li> <li>新闻娱乐体育</li> <li>无</li> </ul> </div> </center> </body> </html>
推荐阅读
FireFox中上层高度不影下层的解决办法
在写网站时,遇到一个差点让我抓狂的事情。以下是一个很简单的网页:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml>>>详细阅读
本文标题:用div和ul标签画表格进行布局兼容火狐、ie6、ie7、Opera等浏览器
地址:http://www.17bianji.com/kaifa2/CSS/16820.html
1/2 1