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

Question

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

你可以直观地看到我在这里说的是什么:http://jsfiddle.net/W2Pez/2

您可以看到它们彼此之间的间隔并不相等。我计划从每个链接中删除宽度属性，那么如何在不使用宽​​度的情况下使每个链接彼此之间的像素数相同？ 请注意，每个链接的容器宽度不能相同，因为，例如，“主页”剩余的空白空间量会比“房价和套餐”多很多。

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 。这将使整个列表居中，然后您可以 float 列表元素并使用边距控制它们彼此之间的距离。

这是您的代码的精简版本:

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 .