Оправданные навигационные кнопки

Question

Я пытаюсь создать основное меню навигации для веб-сайта, которое будет иметь различное количество основных пунктов меню. Панель навигации является горизонтальной и имеет ширину 738 пикселей. Я хотел бы, чтобы левый элемент находился слева от 18px, а самый правый элемент - от 18px от правого края элемента, а остальные пункты меню были бы равномерно распределены между ними. Я использую макет без таблицы.

Пока я не смог заставить его работать так, как я хочу. Установка margin: auto, похоже, не помогает, и я не могу удерживать поле в 18px с обеих сторон, используя таблицу. Одной из идей было использование text-align: justify, но это не оправдывает ни одной строки.

Есть ли простой или менее простой способ сделать это, или мне придется попросить А.Д. ослабить его визуальные требования?

Answer 1

Предполагая, что:

<div id="nav">
  <div id="inner">
    <div>item one</div>
    <div>item two</div>
    <div>item three</div>
    <div>item four</div>
  </div>
</div>

использование:

#inner { margin: 0 18px; overflow: auto; }
#inner div { width: 25%; float: left; }

Это имеет два ограничения:

1. Растягивает каждый элемент до полной доступной ширины, а не до необходимой ширины. Если вам нужна необходимая ширина, вы можете использовать листовые делители в качестве контейнеров для содержимого, которое не будет растягиваться; и

2. Вы должны знать количество детей заранее.

Answer 2

Если я понимаю вашу проблему, это может вам немного помочь:

html:

<ul class="lnkList">
  <li><a href="#">Item</a></li> 
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
</ul>

css:

ul.lnkList{display:block; float:left; margin:auto; width:708px; 
       height:20px; padding:0px 15px;}

 ul.lnkList li{list-style:none; display:block; float:left; 
        width:111px; margin:0px 3px;}

 ul.lnkList li a{display:block; float:left; width:111px;}

Это просто пример того, что вы можете сделать, если у вас есть 6 блоков. Это оправдано.

Answer 3

Если количество пунктов меню является переменным, я не могу думать о чисто CSS-решении. Вы можете использовать Javascript для вычисления ширины каждого элемента в зависимости от их количества и динамического изменения CSS (это можно сделать очень легко с помощью библиотеки DOM / Javascript, такой как jQuery), с оговоркой, что деактивированный Javascript может разрушить ваш макет .

Answer 4

HTML, использующий неупорядоченный список

<ul class="NavBar">
<li><a href="#" class="First">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#" class="Last">Item</a></li>
</ul>

И CSS

.NavBar
{
display:block; margin:auto;
width:738px;
}    
.NavBar li
{
display:inline;
text-align:justify;
list-style:none;
width:140px;
}

.Navbar .First
{
margin-left:18px;
}

.Navbar .Last
{
margin-right:18px;
}