Html 如何调整导航栏的中心位置

我无法使此导航栏居中。请帮忙

这是我的html：

<div class="nav">
            <ul id="menu">
                <li><a href="home.html">Home</a></li>
                <li><a href="latestnews.html">Latest News</a></li>
                <li><a href="resultsevents.html">Results & Events</a></li>
                <li><a href="fundraising.html">Fundraising</a></li>
                <li><a href="gallery.html">Gallery</a></li>
            </ul>
</div> 

---

我试着在整件事的周围加上一个div，并将margin设置为auto，但没有成功。我不知道该怎么办。

我想你的自动边距不起作用的原因是你需要在包装上定义一个宽度。还要确保您使用了正确的id和。上课。下面是我如何对中导航

---

首先，你的目标是

#nav

，而根据你的html，它是

.nav

然后，您需要为导航父对象设置一个宽度，以获得居中位置

编辑：由于您的列表项目和链接没有响应，因此在父导航中添加百分比是没有意义的

您可以使用类似这样的方法来实现以响应为中心的导航：

.nav {
    margin:0px auto;
    width:90%;
}
ul {
    list-style-type:none;
    padding:0;
}
li {
    float: left;
    width:18%;
}
li a {
    width:100%;
}

---

您几乎已经拥有了它，请使用：

.nav {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 960px;
}

您只需调整

最大宽度

，即可将导航栏移到中心位置（取决于页面容器的宽度）

请添加一个，以便我们了解问题所在。

.wrapper {

    width:80%;
    margin-left:auto;
    margin-right:auto;

}

.nav {
    margin:0px auto;
    width:705px;
}

.nav {
    margin:0px auto;
    width:90%;
}
ul {
    list-style-type:none;
    padding:0;
}
li {
    float: left;
    width:18%;
}
li a {
    width:100%;
}

.nav {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 960px;
}