0

我正在开发我的第一个网站，我对如何将导航栏居中感到有些困惑。我已经尝试定义一个宽度，确保它是一个块元素并将 margin-left 和 margin-right 设置为 auto 但它仍然没有居中。这是我的 css 和 html 文件。

HTML：

<html>
<head>
    <title>Test Site</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <div class="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Forums</a></li>
            <li><a href="#">Misc</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </li>
            <li><a href="#">Donate</a></li>
        </ul>
    </div>
</body>
</html>

CSS：

.nav > ul {
    width: 960px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.nav ul {
    list-style: none;
    background: #444444;
    margin: 0px;
    padding: 0px;
}

.nav li {
    float: left;
    width: 150px;
    position: relative;
    background: #444444;
    text-align: center;
    border: 1px solid white;
    height: 30px;
    line-height: 30px;
}

.nav li ul li {
    float: none;
    width: 140px;
    text-align: left;
    padding: 5px;
    border-top: 1px solid white;
    line-height: 30px;
}

.nav li ul {
    position: absolute;
    top: 30px;
    left: 0px;
    visibility: hidden;
}

.nav li:hover {
    background-color: maroon;
}

.nav li:hover ul {
    visibility: visible;

}

.nav a {
    text-decoration: none;
    color: white;
}

.nav li ul {
    float: none;
}
4

4 回答 4

2

您正在覆盖使其居中的定义...

改变：

.nav > ul {
    width: 960px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.nav ul {
    list-style: none;
    background: #444444;
    margin: 0px; /* overrides previously defined margin */
    padding: 0px; /* overrides previously defined margin */
}

至：

.nav > ul {
    width: 960px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.nav ul {
    list-style: none;
    background: #444444;
    /* margin: 0; */
    padding: 0px;
}
于 2013-03-29T00:11:15.063 回答
0

另一种（也是更好的）方法是

  1. 交换.nav > ul和.nav ul规则的位置，即在（比较通用的）之后.nav > ul指定（更具体的）规则.nav ul
  2. 并设置width: 608px;_.nav > ul

这是它的工作原理：

a).nav ul将 设置margin: 0; padding: 0为所有<ul>元素。<ul>它删除了所有元素 的默认填充/边距。

b) 现在（假设对于.nav > ul，您没有将左右边距设置为and auto）您有一个左对齐的主导航，它水平地覆盖其容器。因此，要使其水平居中，您可以将其宽度设置为最小宽度，而无需将导航项目移动到新行，即，并将边距设置为以便在其容器中水平居中。width960px608pxauto

这是CSS

.nav ul{
   list-style: none;
   background: #444444;
   margin: 0px;
   padding: 0px;
}

.nav > ul{
   width: 608px;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

我希望它有帮助

于 2013-03-29T10:37:48.443 回答
0

将 .nav > ul ul 更改为 .nav > ul li 和

.nav li ul {
    position: relative;
    top: 0px;
    padding-left:0;
    visibility: hidden;
}
于 2013-03-29T00:16:34.687 回答
0

的宽度.nav>ul设置为大于其中所有导航项的总宽度。它应该是width: 608px;并且您需要添加margin: 0 auto;到.nav ul规则声明

最终规则.nav > ul和.nav ul

.nav > ul{
  width: 608px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.nav ul{
  list-style: none;
  background: #444;
  margin: 0 auto;
  padding: 0;
}
于 2013-03-29T00:20:24.463 回答