Как центрировать эти кнопки навигации?

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 Это будет центрируйте весь список, и затем вы можете поплавать элементами списка и управлять тем, как далеко друг от друга они располагаются друг от друга с использованием полей.

Вот усеченную версию кода:

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.