Протяните горизонтальную ul, чтобы она соответствовала ширине div

Для основного навигатора моего сайта есть div с шириной 980px с 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, чтобы получить ее очень близко, но то, что мне действительно нужно, - это способ сделать ее растянутой, чтобы она соответствовала автоматически. Возможно ли это?

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

Ответы

Ответ 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/}

Ответ 2

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

Ответ 3

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

#horizontal-style {
    width: 100%;
}

li {
    width: 20%;
}

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

Ответ 4

#horizontal-style {
    width: 100%;
}

li {
    width: 20%;
}

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