上一篇
下一篇
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: 评论: 6 | 引用: 0 | 查看次数: -
回复
<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 li{display:inline-block; -display:inline; zoom:1; width:80px; height:28px; line-height:28px;}