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

Question

我正在创建一个导航栏，其中有五个不同的链接。使用 div 元素，我创建了导航栏，然后将每个链接分隔到自己的容器中。默认情况下，它们都压在左侧，而不是在导航栏中居中。为了在没有完全错位的导航栏的情况下相处，我添加了近似宽度以使每个链接彼此间隔相等；但是，它并不完全对齐，我需要一种更专业的方式来居中它们。

您可以在此处直观地看到我在说什么：http://jsfiddle.net/W2Pez/2

您可以看到，它们彼此之间的间距并不相同。我计划从每个链接中删除宽度属性，那么如何在不使用宽​​度的情况下使每个链接彼此相距相同数量的像素？ 请注意，每个链接的容器不能具有相同的宽度，例如，“Home”剩余的空白空间量将远远超过“Rates & Packages”。

CSS：

#nav {
    background-color: #C08374;
    height: 50px;
    line-height: 50px;
    width: 1000px;
    margin: auto;
    vertical-align: middle;
    border: 1px solid #A76358;
}

.nav_button {
    float: left;
    text-align: center;
    line-height: 50px;
}

HTML：

<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>

Answer 1

诀窍是将容器设置为text-align: center，然后将列表设置为（应该是<ul> 设置为display: inline-block。这将使整个列表居中，然后您可以浮动列表元素并控制使用边距它们彼此之间的距离。

这是您的代码的精简版：

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>

CSS

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

Here's a fiddle.