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

Question

用无序列表模拟一个3行3列的表格，如何达到这样一个效果：第一，所有的li为块元素，每行水平放置三个，并且有固定的width和height，里面的内容水平居中并且上下居中；第二，ul能够自动适应由所有的li决定的高度和宽度；第三，ul能在它的上级元素比如div中
居中对齐
我用了这样代码还是不行
<div id="bigsite">
<ul>
<li>新浪</li>
<li>网易</li>
<li>搜狐</li>
</ul>
<ul>
<li>新华网</li>
<li>人民网</li>
<li>凤凰网</li>
</ul>
<ul>
<li>谷歌</li>
<li>百度</li>
<li>搜狗</li>
</ul>
</div>
。。。。。。
ul{list-style-type:none;margin:0px auto;padding:0px;}
li{float:left;width:200px;height:50px;border:0px;padding:0px;margin:0px;}
如果我把ul设置成float:left，结果就不能再上级div中水平居中了
如果不设置其float属性，那么ul就像是一个空的元素，里面没有内容，而且大小
也不能随着li块自动改变
还有，改变li的width，有时候还会出现意想不到的结果，比如三行三列的效果被打破

Answer 1

<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沟通。

Answer 2

<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>本回答被提问者采纳

Answer 3

*{ 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水平居中