CSS - 要在我的导航栏中放置LI项目DIV

我在我的博客上有一个导航栏，里面有几个div。我一直在调整它3个小时，但我仍然无法弄清楚为什么li项不居中navbar div的中间。有人可以帮忙吗？这里是我的代码：CSS - 要在我的导航栏中放置LI项目DIV

#NavbarMenu {background: #FFF; width: 100%; height: 40px;font-size: 14px; color: #3297FD; font-weight: bold; margin: 0 auto 0; padding:0px; line-height: 20px; text-align : center;} 
.navbarleft{width:738px; text-align: center;} 

#nav {margin: 0; padding: 0; list-style: none; text-align:center;} 
#nav ul { list-style: none; margin: auto; padding: 0; text-align: center; width: 100%; background: #3297FD; } 
#nav li {list-style: none; margin: 0; padding: 0; text-align:center; background: #FFF;} 

#nav li a, #nav li a:link, #nav li a:visited {color: #3297FD; display: block; font-family:arial; text-transform: uppercase; font-weight: bold; margin: 0; padding: 9px 18px 9px; } 
#nav li a:hover, #nav li a:active {background: #2D89E5; color: #fff; margin: 0; padding: 9px 18px 9px; text-decoration: none;height: 20px; text-align:center;} 

#nav li li a, #nav li li a:link, #nav li li a:visited {background: #3297FD; width: 200px; color: #FFF; font-weight: normal; text-transform: lowercase; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #fff; border-left: 1px solid #fff; border-right: 0px solid #fff; text-align:center;} 
#nav li li a:hover, #nav li li a:active {background:#111; color: #fff; padding: 7px 10px; text-align:center;} 

#nav li {float: left; padding: 0; } 
#nav li ul {z-index: 0; position: absolute; height: auto; left: -999em; width: 180px; margin-left: 50%; padding: 0; text-align:center;} 
#nav li ul a {width: 180px; text-align:center;} 
#nav li ul ul {margin: -32px 0 0 171px; text-align:center;} 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;} 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {text-align:center;} 
#nav li:hover, #nav li.sfhover {position: static; 
} 

#main_navigation { 
width: 100%; 
margin-auto; 
text-align : center; 
} 

<div id="main_navigation"> 

<div id='NavbarMenu"> 

<div class='navbarleft'><center><ul id='nav'> 

<li><a href="/">Home</a></li> 
<li><a href="/about.me">About</a></li> 
<li><a href="/ask">Ask</a></li> 
<li><a href="http://twitter.com/ThatsWhatKidsDO">Twitter</a></li> 
<li><a href="/support">Submit</a></li> 
<li><a href="/tagged/typography">Typography</a></li> 
<li><a href="http://www.tumblr.com/directory/recommend/typography/epicjamess">Reccommend</a></li> 
<li><a href="/FAQ">FAQ</a></li> 

</ul></center></div></div></div></center>

来源

2011-04-22 James Charless Dickinson

正常我使用浮动：左，但更好的只是取代它：显示：内联块;文本对齐：中心多数民众赞成在所有 – user956584 2014-07-24 13:00:06

这可能是一个很好的，干净启动：

http://jsfiddle.net/wXjj8/

来源

2011-04-22 13:43:46 gutierrezalex

这工作完美。谢谢！:) – 2011-04-22 13:50:16

尝试改变

margin-auto;

到

margin: 0 auto;

你也不应使用中心的标签，在最新版本的HTML标签的中心已被弃用。

来源

2011-04-22 13:41:10 Version1

你的代码是充满错别字。 <center>标记已被弃用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 

    <style type="text/css"> 
    #NavbarMenu {background: #FFF; width: 100%; height: 40px;font-size: 14px; color: #3297FD; font-weight: bold; margin: 0 auto 0; padding:0px; line-height: 20px; text-align : center;} 
    .navbarleft{width:738px; text-align: center;margin:0 auto;} 

    #nav {margin: 0; padding: 0; list-style: none; text-align:center;} 
    #nav ul {list-style:none; margin: auto; padding: 0; text-align: center; width: 100%; background: #3297FD; display: inline-block;} 
    #nav li {margin: 0;padding:0;text-align:center;background:#FFF;display:inline-block;} 
    #nav li a {display: inline-block;} 
    #nav li a, #nav li a:link, #nav li a:visited {color: #3297FD; display: inline-block; font-family:arial; text-transform: uppercase; font-weight: bold; margin: 0; padding: 9px 18px 9px; } 
    #nav li a:hover, #nav li a:active {background: #2D89E5; color: #fff; margin: 0; padding: 9px 18px 9px; text-decoration: none;height: 20px; text-align:center;} 

    #nav li li a, #nav li li a:link, #nav li li a:visited {background: #3297FD; width: 200px; color: #FFF; font-weight: normal; text-transform: lowercase; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #fff; border-left: 1px solid #fff; border-right: 0px solid #fff; text-align:center;} 
    #nav li li a:hover, #nav li li a:active {background:#111; color: #fff; padding: 7px 10px; text-align:center;} 

    #nav li {float: left; padding: 0; } 
    #nav li ul {z-index: 0; position: absolute; height: auto; left: -999em; width: 180px; margin-left: 50%; padding: 0; text-align:center;} 
    #nav li ul a {width: 180px; text-align:center;} 
    #nav li ul ul {margin: -32px 0 0 171px; text-align:center;} 
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;} 
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {text-align:center;} 
    #nav li:hover, #nav li.sfhover {position: static; } 

    </style> 
</head> 
<body> 

<div id="main_navigation"> 
<div id="NavbarMenu"> 
<div class="navbarleft"> 
<ul id="nav"> 
<li><a href="/">Home</a></li> 
<li><a href="/about.me">About</a></li> 
<li><a href="/ask">Ask</a></li> 
<li><a href="http://twitter.com/ThatsWhatKidsDO">Twitter</a></li> 
<li><a href="/support">Submit</a></li> 
<li><a href="/tagged/typography">Typography</a></li> 
<li><a href="http://www.tumblr.com/directory/recommend/typography/epicjamess">Reccommend</a></li> 
<li><a href="/FAQ">FAQ</a></li> 
</ul> 
</div> 
</div> 
</div> 

</body> 
</html>

这将以它们为中心。但是，您必须在菜单中有很多项目才能按照您的指定将它们全部放入width:738px;。你将不得不减少一些填充物。

来源

2011-04-22 13:44:45 easwee

编辑：我最终明白了......没关系。 :) – 2011-04-22 13:48:22

CSS - 要在我的导航栏中放置LI项目DIV

回答

相关问题