Css 如何使这些导航按钮居中？

我正在创建一个导航栏，其中有五个不同的链接。使用div元素，我创建了导航栏，然后将每个链接分离到自己的容器中。默认情况下，它们都会挤压到左侧，而不是在导航栏中居中。为了避免导航条完全错位，我增加了近似的宽度，使每个链接之间的间距相等；然而，它并没有完全对齐，我需要一种更专业的方法来调整它们的中心

您可以直观地看到我在这里所说的内容：

你可以看到，它们之间的间隔并不相等。我计划删除每个链接的宽度属性，那么如何使每个链接彼此之间的像素数相同而不使用宽度呢请注意，每个链接的容器的宽度不能相同，因为，例如，“主页”留下的空白空间量将远远超过“价格和套餐”。

CSS:

HTML:

---

诀窍是将容器设置为使

文本对齐：居中

，然后将列表（它应该是

设置为

显示：内联块

。这将使整个列表居中，然后可以浮动列表元素，并使用边距控制它们之间的距离

以下是您的代码的精简版本：

HTML

<div id="nav">
  <ul>
    <li class="nav_button">
      <a href="index.html">Home</a>
    </li>
    <li class="nav_button">
      <a href="rates.html">Rates &amp; Packages</a>
    </li>
    <li class="nav_button">
        <a href="about.html">About Us</a>
    </li>
    <li class="nav_button">
       <a href="menu.html">Menu</a>
    </li>
    <li class="nav_button">
      <a href="attractions.html">Nearby Attractions</a>
    </li>
  </ul>
</div>

---

使用百分比。

100/[菜单项数]

应该给你使用的数量。使用菜单中的标签代替

ul li

divs使导航按钮内联块不浮动，添加左右填充。没有宽度a和文本对齐：在父对象上居中。如前所述，答案是使用ul/li。这把小提琴可能就是你想要的：使用这种方法的唯一缺点od是指我无法将每个链接之间的空间量与外部链接和导航条侧面之间的空间量相等。因此，您希望链接是容器宽度的精确分割。只需将它们设置为百分比。100/5=20%。那么您当然不需要上述技术。

<div id="nav">
   <div class="nav_button" style="width: 25px"></div>
   <div class="nav_button" style="width: 175px">
       <a href="index.html">Home</a>
   </div>
   <div class="nav_button" style="width: 250px">
       <a href="rates.html">Rates &amp; Packages</a>
    </div>
    <div class="nav_button" style="width: 175px">
        <a href="about.html">About Us</a>
   </div>
   <div class="nav_button" style="width: 150px">
       <a href="menu.html">Menu</a>
   </div>
    <div class="nav_button" style="width: 250px">
      <a href="attractions.html">Nearby Attractions</a>
    </div>
   <div class="nav_button" style="width: 25px">
</div>

<div id="nav">
  <ul>
    <li class="nav_button">
      <a href="index.html">Home</a>
    </li>
    <li class="nav_button">
      <a href="rates.html">Rates &amp; Packages</a>
    </li>
    <li class="nav_button">
        <a href="about.html">About Us</a>
    </li>
    <li class="nav_button">
       <a href="menu.html">Menu</a>
    </li>
    <li class="nav_button">
      <a href="attractions.html">Nearby Attractions</a>
    </li>
  </ul>
</div>

#nav {
  background-color: #C08374;
  border: 1px solid #A76358;
  text-align: center;
}
ul {
  list-style: none;
  display: inline-block;
}
ul li {
  float: left;
  margin: 0 20px;
}
ul li a {
  color: white;
}