Растянуть горизонтальную ul по ширине div

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

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

44
задан Glenn 3 March 2011 в 21:32
поделиться