css ul li导航菜单居中问题解决方法

昨晚群里一个朋友帮忙解决的问题，之前没有遇到过，题目如下：
不改变htML结构，使导航菜单垂直水平居中，导航宽度自适应屏幕100%，高度30px; 单项高度28px,宽80px;
兼容：ie6+,ff,chrome,opera等主流浏览器。
html:
Example Source Code

复制代码代码如下:
ul id="nav">
li> a href="#"> home/li>
li> a href="#"> advice/li>
li> a href="#"> page/li>
li> a href="#"> PEople/li>
li> a href="#"> service/li>
/ul>

注意：html结构不能变，菜单宽高可定义！

复制代码代码如下:
style type="text/css">
*{ margin:0; padding:0; }
ul,li{ list-style:none; }
.clear{ clear:both; }
#nav{ width:100%; whITe-space:nowrap; overflow:hidden; background:#ccc; position:relative; }
#nav li{ float:left; position:relative; left:50%; }
#nav .a1{ margin-left:-240px; } #nav .a2{ margin-left:-160px; } #nav .a3{ margin-left:-80px; }
#nav li a{ display:block; text-align:center; line-height:28px; background:#ccc; color:#000; width:80px; height:28px; }
/style>
ul id="nav">
li class="a1"> a href="#"> home/a> /li>
li class="a2"> a href="#"> advice/a> /li>
li class="a3"> a href="#"> page/a> /li>
li> a href="#"> people/a> /li>
li> a href="#"> service/a> /li>
/ul>

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！