Горизонтальный растягивающий элемент ul для ширины div

Question

Для главной навигации моего сайта есть div шириной 980 пикселей с ul для ссылок основной навигации. Я пытаюсь сделать так, чтобы навигационные ссылки растягивались по ширине div равномерно.

<div style="width: 980px;">
<ul id="horizontal-style">
  <li><a href="#">Nav Item</a></li>
  <li><a href="#">Short Item</a></li>
  <li><a href="#">Really Long Nav Item</a></li>
  <li><a href="#">Nav Link</a></li>
  <li><a href="#">Another Link</a></li>
</ul>
</div>

Я делаю некоторые типичные CSS, чтобы создать список ul по горизонтали (float: left, display: block). Я могу настроить отступ li, чтобы он был очень близко, но мне действительно нужен способ растянуть его, чтобы он подходил автоматически. Возможно ли это?

Редактировать Сложность 1: не могу использовать таблицы. Сложность 2: каждый элемент навигации будет иметь различную ширину для размещения более длинных и коротких имен ссылок.

Answer 1

Это самый простой способ сделать это: http://jsfiddle.net/thirtydot/jwJBd/

(или с table-layout: fixed для равномерного распределения по ширине: http://jsfiddle.net/thirtydot/jwJBd/59/)

Это не будет работать в IE7.

#horizontal-style {
    display: table;
    width: 100%;
    /*table-layout: fixed;*/
}
#horizontal-style li {
    display: table-cell;
}
#horizontal-style a {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 0 5px;
    background: #999;
}

_{Старый ответ перед редактированием: http://jsfiddle.net/thirtydot/DsqWr/}

Answer 2

Люди ненавидят таблицы за нетабличными данными, но то, что вы просите, это именно то, в чем таблицы хороши.<table width="100%">

Answer 3

не элегантный (но эффективный) способ: используйте проценты

#horizontal-style {
    width: 100%;
}

li {
    width: 20%;
}

Это работает только с примером 5 <li>.Для более или менее, измените свой процент соответственно.Если у вас есть другие <li> на вашей странице, вы всегда можете назначить этим конкретным классам "menu-li", чтобы затрагивать только их.

Answer 4

#horizontal-style {
    width: 100%;
}

li {
    width: 20%;
}

Этот подход не будет отзывчивым, потому что он будет 20% на самом маленьком экране, который был бы слишком маленьким, или другим способом переопределения был бы медиа-запрос на разных точках останова.