上一篇
下一篇
ul li导航菜单居中问题
日期:2010-05-28作者:woniu
昨晚群里一个朋友帮忙解决的问题，之前没有遇到过，题目如下：
不改变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结构不能变，菜单宽高可定义！
不改变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结构不能变，菜单宽高可定义！
文章来自: 
引用通告: 
Tags: 评论: 8 | 引用: 0 | 查看次数: -
回复
<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>
woniu 于 回复
*{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>
woniu 于 回复思路很棒....兼容性很好 谢谢分享....
#nav{display:block; height:30px; background:#EEE;padding:0; margin:0; top:50%; position: absolute; width:100%; margin-top:-15px; text-align:center;}
#nav li{display:inline-block; -display:inline; zoom:1; width:80px; height:28px; line-height:28px;}
woniu 于 回复
#nav li{display:inline-block; -display:inline; zoom:1; width:80px; height:28px; line-height:28px;}
woniu 于 回复要求导航菜单是横向的，不是纵向居中.....
<style type="text/css">
body{padding:0; margin:0}
#nav{display:table; height:30px; background:#EEE;padding:0; margin:0; width:100%;}
#nav li{display:table-cell; width:80px; height:28px; line-height:28px; text-align:center}
</style>
这样就可以处理了
woniu 于 回复
body{padding:0; margin:0}
#nav{display:table; height:30px; background:#EEE;padding:0; margin:0; width:100%;}
#nav li{display:table-cell; width:80px; height:28px; line-height:28px; text-align:center}
</style>
这样就可以处理了
woniu 于 回复不兼容
是这个意思吗？
body{padding:0; margin:0}
#nav{display:block; height:30px; background:#EEE;padding:0; margin:0; top:50%; position: absolute; width:100%; margin-top:-15px}
#nav li{display:block; float:left; width:80px; height:28px; line-height:28px; text-align:center}
woniu 于 回复
body{padding:0; margin:0}
#nav{display:block; height:30px; background:#EEE;padding:0; margin:0; top:50%; position: absolute; width:100%; margin-top:-15px}
#nav li{display:block; float:left; width:80px; height:28px; line-height:28px; text-align:center}
woniu 于 回复呵呵，不对。li 左浮动了。要求是l导航居中
v顶.....................
等待博主处理，这也正是本人一直想要处理的问题，但却一直没有解决，望帮忙！！！
<ul id="nav">
<li><a href="#">home</li></li>
<li><a href="#">advice</li></li>
<li><a href="#">page</li></li>
<li><a href="#">people</li></li>
<li><a href="#">service</li></li>
</ul>
这个是不是写错了。
应该是这样的吧。
<li><a href="#">service</a></li>
woniu 于 回复
<li><a href="#">home</li></li>
<li><a href="#">advice</li></li>
<li><a href="#">page</li></li>
<li><a href="#">people</li></li>
<li><a href="#">service</li></li>
</ul>
这个是不是写错了。
应该是这样的吧。
<li><a href="#">service</a></li>
woniu 于 回复太粗心，改了...
发表评论
<!--
#nav{width:100%; height:30px; list-style:none; white-space:nowrap;}
#nav li{ float:left; height:28px; line-height:28px; margin:auto;width:80px;}
#nav li.first{margin-left:30%;}
#nav li.last{margin-right:30%;}
-->
</style>
<ul id="nav">
<li class="first"><a href="#" >home</a></li>
<li><a href="#">advice</a></li>
<li><a href="#">page</a></li>
<li><a href="#">people</a></li>
<li class="last"><a href="#" >service</a></li>
</ul>