如何居中這些導航按鈕？

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。