请教高手网页设计用无序列表ul li代替表格table标签的css问题

发布网友 发布时间：2022-04-06 10:34

我来回答

共3个回答

热心网友 时间：2022-04-06 12:03

<style type="text/css">
*{margin:0 auto;padding:0px;text-align:center;}
#bigsite{margin-top:10px; height:1000px;}
#bigsite ul{list-style:none;width:606px;}
#bigsite ul li{text-decoration:none; float:left; display:block; width:200px; height:50px; font-size:14px;line-height:50px;}
.first{border-left:1px #ababab solid;border-right:1px #ababab solid;border-top:1px #ababab solid;}
.second{border-top:1px #ababab solid;border-right:1px #ababab solid;}
.last{border-bottom:1px #ababab solid;}
.clear{clear:both;}
</style>

<div id="bigsite">
<ul>
<li class="first">新浪</li>
<li class="second">网易</li>
<li class="second">搜狐</li>
</ul>
<div class="clear"></div>
<ul>
<li class="first">新华网</li>
<li class="second">人民网</li>
<li class="second">凤凰网</li>
</ul>
<div class="clear"></div>
<ul>
<li class="first last">谷歌</li>
<li class="second last">百度</li>
<li class="second last">搜狗</li>
</ul>
</div>

PS:兼容性ie6,8，FF，谷歌正常，其他浏览器未测试。上边是我写的你要的ul li代替表格table的代码，当下流行div+css，但是有些时候还是用table要简单的多，而不是一味追求div+css呵呵，有问题欢迎各位随时百度hi沟通。

热心网友 时间：2022-04-06 13:21

<style type="text/css">
#bigsite ul{width:300px; height:20px;list-style-type:none;margin:0px auto;padding:0px;}
#bigsite li{width:100px;height:20px; float:left;border:0px;padding:0px;margin:0px; text-align:center; }

</style>

<div id="bigsite">
<ul>
<li>新浪</li>
<li>网易</li>
<li>搜狐</li>
<li>新华网</li>
<li>人民网</li>
<li>凤凰网</li>
<li>谷歌</li>
<li>百度</li>
<li>搜狗</li>
</ul>

</div>

热心网友 时间：2022-04-06 14:56

*{ margin:0; padding:0}
ul{ list-style-type:none; position:relative; float:left; left:50%;}
li{ float:left; width:200px; height:50px; line-height:50px; position:relative; right:50%; }
li元素内容水平垂直居中，ul水平居中