ел бы равномерно растянуть 6 навигационных элементов по контейнеру в 900 пикселей с равномерным количеством пустого пространства между ними. Например...

---| 900px Container |---

---| HOME    ABOUT    BASIC SERVICES    SPECIALTY SERVICES    OUR STAFF    CONTACT US |---

В настоящее время лучший метод, который я могу найти, это сделать следующее:

nav ul {
  width: 900px; 
  margin: 0 auto;
}

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  width: 150px;
}

ПРОБЛЕМА с этим в два раза. Прежде всего, это на самом деле не оправдывает, а скорее равномерно распределяет теги li по всему тегу ul ... создавая неравномерное пространство между небольшими элементами меню, такими как "HOME" или "ABOUT", и большими, такими как "BASIC SERVICES" ,

Вторая проблема заключается в том, что компоновка ломается, если размер элемента навигации превышает 150 пикселей, каковым является SPECIALTY SERVICES - даже если для всей навигации более чем достаточно места.

Кто-нибудь может решить это для меня? Я искал в Интернете решения, и все они, похоже, терпят неудачу. CSS / HTML только если возможно ...

Спасибо!

ОБНОВЛЕНИЕ (29.07.13): Использование табличных ячеек - лучший современный способ реализовать этот макет. Смотрите ответ Феликса ниже.table cell свойствоработает на 94% браузеров В настоящее время. Вам придется что-то делать с IE7 и ниже, но в остальном все должно быть в порядке.

ОБНОВЛЕНИЕ (30.07.13): К сожалению, есть ошибка веб-набора, которая влияет на это, если вы комбинируете этот макет с медиа-запросами. На данный момент вам нужно избегать изменения свойства display.Смотрите Webkit Bug.

ОБНОВЛЕНИЕ (25.07.14): Ниже приведено лучшее решение, включающее выравнивание текста: выровнять. Использовать это проще, и вы избежите ошибки Webkit.