Вопросы Теги

Как сделать равномерно и полностью растянуть фиксированное количество горизонтальных элементов навигации по указанному контейнеру

Я хотел бы равномерно растянуть 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 пикселей, а это СПЕЦИАЛЬНЫЕ УСЛУГИ - даже если места более чем достаточно для всей навигации.

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

Спасибо!

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

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

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

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

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

69
задан O. R. Mapper 12 July 2016 в 14:35
поделиться