0

我正在尝试制作自己的导航栏，以更好地了解如何创建良好的导航栏。我遇到的问题是我的导航栏居中。现在我知道使用使用 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>
4

4 回答 4

2

这就是 inline-block 是你朋友的地方。不要使用浮点数。

#navbar {
    text-align: center;
}

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

编辑：添加菲德尔

于 2012-10-09T22:46:01.580 回答
1

使用 #navbar 上的 float:left 您将无法使用 marin-left|right:auto 技巧。如果你只是删除浮动，#navbar 将是 100% 宽，这也不是一个选项。

简单的解决方案：

  1. 从#navbar 中删除浮动并在#navbar 上使用固定宽度，并在左右两侧使用自动边距。

  2. 从 #navbar 中删除 float 并在 #navbar 上使用 display:inline-block 并在其父元素上添加 text-align:center 。如有必要，在#navbar li 上设置 text-align:left 。

  3. 从#navbar 中删除浮动并为#navbar 列表项设置display:inline-block，并在#navbar 上使用text-align:center。

于 2012-10-09T22:47:07.573 回答
0

从您的#navbar{} css 中删除float: left 。然后你可能想移动背景颜色：#dee8ff; 到一个子元素，你可能会稍微调整填充。

于 2012-10-09T22:42:33.040 回答
0

删除和添加（宽度取自子类别类float:left）#navbarwidth: 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/

于 2012-10-10T09:41:14.803 回答