Question

我正在尝试制作自己的导航栏，以便更好地了解如何创建良好的导航栏。我遇到的问题是我的导航栏居中。现在我知道使用margin-left：auto和margin-right：auto通常可以做到这一点，我过去曾经使用过，但在这种情况下，无论我把这些样式元素放在哪里，我的导航栏似乎都不是居中。我的身体设置为100％，并在下面提供了我的代码。 *注意：我已经为我的导航栏尝试了一个容器并将其居中，但它似乎仍无效。

#navbar ul {
list-style-type:none;
color: #000;
padding: 0px;
text-align: center;
}
li:hover {
background-color: #cc2c32;
padding: 16px .1px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.subcategory {
display: none;
width: 1031px;
height: 200px;
background-color: #cc2c32;
color: #03F;
position: absolute;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin-top: 15px;
}
li:hover .subcategory {
display: block;
}
#navbar {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: #dee8ff;
float: left;
font-family: Arial, Helvetica, sans-serif;
margin-left: auto;
margin-right: auto;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
padding: 0 1.5em;
text-decoration: none;
}
ol {
list-style-type: none;
float: left;
display: block;
}
.contentwrapper {
margin-top: 10px;
margin-bottom: 10px;
height: 180px;
width: 200px;
background-color: inherit;
position: relative;
color: #2d4594;
}
a:link {
color: #2d4594;
text-decoration: none;
}
a:visited {
color: #2d4594;
text-decoration: none;
}
a:hover {
color: #2d4594;
text-decoration: none;
}

我的HTML是

<body>
<div id="navbar">
  <ul> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory">
            <div class="contentwrapper">
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            </div>
        </div>
    </li>
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
</ul> 
</div> 
</body>

Answer 1

这是inline-block是你的朋友。不要使用花车。

#navbar {
    text-align: center;
}

#navbar > ul {
    display: inline-block;
    vertical-align: top;
    *display: inline;
    *zoom: 1;
}

修改：已添加fiddel

Answer 2

使用float：在#navbar上，你将无法使用marin-left | right：auto trick。如果你只是删除浮动，＃navbar将是100％宽，这也不是一个选项。

简单的解决方案：

从#navbar中移除浮动并在#navbar上使用固定宽度，左右为自动边距。
从#navbar中删除float并在#navbar上使用display：inline-block并在其父元素上添加text-align：center。如有必要，请在#navbar li上设置text-align：left。
从#navbar中移除float并为#navbar列表项设置display：inline-block，其中text-align：center on #navbar。

Answer 3

从 #navbar {} css中删除 float：left 。然后你可能想将 background-color：＃dee8ff; 移动到子元素，你可能会调整一点填充。

Answer 4

从float:left移除#navbar并添加width: 1031px; margin:0 auto（宽度取自子类别类别）

#navbar {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: #dee8ff;
width: 1031px;
font-family: Arial, Helvetica, sans-serif;
margin:0 auto
}

演示http://jsfiddle.net/KLP8d/

中心导航栏

4 个答案: