Question

我在第一个网站上工作，我对如何将导航栏放在中心感到有些困惑。我已经尝试定义一个宽度，确保它是一个块元素并将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;
}

Answer 1

你覆盖了那些会让它居中的定义 ......

变化：

.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;
}

Answer 2

更改.nav＆gt; ul ul to .nav＆gt; ul li 和

.nav li ul {
    position: relative;
    top: 0px;
    padding-left:0;
    visibility: hidden;
}

Answer 3

.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;
}

Answer 4

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

交换.nav > ul和.nav ul规则的位置，即在之后指定（更具体的）.nav > ul规则（相对通用的）{{1 }}

和在.nav ul
中设置width: 608px;
这是它的工作原理：

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

b）现在（假设，对于<ul>，您没有左右边距设置为.nav > ul且auto为width）您已离开对齐的主导航，水平覆盖其容器。因此，要使其水平居中，您可以将宽度设置为最小宽度，而无需将导航项移动到新行，即960px并将边距设置为608px，以便将其水平居中于其中心容器

这是CSS

auto

我希望它有所帮助

使用CSS居中导航栏

4 个答案: