Question

我的博客上有一个导航栏，里面有几个div。我一直在调整它3个小时，但我仍然无法弄清楚为什么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>

Answer 1

这可能是一个好的，干净的开始：

http://jsfiddle.net/wXjj8/

Answer 2

尝试更改

margin-auto;

到

margin: 0 auto;

您也不应该使用中心标记，因为不推荐使用最新的html版本中心标记。

Answer 3

你的代码充斥着拼写错误。不推荐使用<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;。你可能需要减少一些填充。

CSS - 想要在我的导航栏DIV中居中LI项目

3 个答案: