Как равномерно и полностью растянуть фиксированное количество элементов горизонтальной навигации по указанному контейнеру - PullRequest
Новая
       18

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

67 голосов
/ 21 февраля 2011

Я бы хотел равномерно растянуть 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.

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

Ответы [ 12 ]

0 голосов
/ 05 сентября 2012

Я не решаюсь предложить это, так как он неправильно использует старые html. Это не ХОРОШЕЕ решение, но это решение: используйте таблицу.

CSS: 

table.navigation {
    width: 990px;
}
table.navigation td {
    text-align: center;
}

HTML: 

<table cellpadding="0" cellspacing="0" border="0" class="navigation">
    <tr>
        <td>HOME</td>
        <td>ABOUT</td>
        <td>BASIC SERVICES</td>
        <td>SPECIALTY SERVICES</td>
        <td>OUR STAFF</td>
        <td>CONTACT US</td>
    </tr>
</table>

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

0 голосов
/ 21 февраля 2011

Вместо того, чтобы определять ширину, вы можете просто наложить поле li влево, чтобы интервал был постоянным, и просто убедиться, что поле (а) + li соответствуют 900px. 

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

Надеюсь, это поможет.

Страница:
...