Question

我正在根据w3学校教程（https://www.w3schools.com/howto/howto_js_topnav_responsive.asp）紧密地向网站添加响应式导航栏。一切工作正常，除了我试图将菜单链接放在页面上（对于台式机版本）居中，而不是像本教程中说明的那样将其放在左侧。

我尝试修改每个属性（包括float）的值，但到目前为止没有成功。它必须非常简单，但是我想念什么呢？

html：

  <div class="nav" id="nav">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#menu">Menu</a>
    <a href="#drinks">Drinks</a>
    <a href="#values">Values</a>
    <a href="#gallery">Gallery</a>
    <a href="#booking">Booking</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
    </a>
  </div>

css：

.nav {
  background-color: gold;
  overflow: hidden;
}
.nav a {
  float: left; 
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.nav a:hover {
  background-color: pink; 
  color: green;
}
.nav .icon {
  display: none;
}

我看到这个问题已经通过引导程序被问到了，但是作为一个初学者，我在这里只使用普通的CSS。

Answer 1

您可以将flex与中心布局一起使用，尝试一下

.topnav {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #333;
}

Answer 2

如果出于某种原因想要避免使用flexbox的另一种方法是将菜单项设置为display: inline-block而不是使用浮动。然后，在导航包装上一个简单的text-align: center就足够了。

从侧面讲，将<nav>元素用作包装器并将菜单项作为<ul>元素放在<li>列表中在语义上更有意义。

.nav {
  background-color: gold;
  overflow: hidden;
  text-align: center;
}

.nav a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.nav a:hover {
  background-color: pink;
  color: green;
}

.nav .icon {
  display: none;
}

<div class="nav" id="nav">
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#menu">Menu</a>
  <a href="#drinks">Drinks</a>
  <a href="#values">Values</a>
  <a href="#gallery">Gallery</a>
  <a href="#booking">Booking</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

居中菜单的正确方法是什么？

2 个答案: