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

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

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 ]

94 голосов
/ 30 июля 2013

Используйте text-align:justify для контейнера, таким образом, он будет работать независимо от того, сколько элементов в вашем списке (вам не нужно определять% widths для каждого элемента списка

FIDDLE 

<ul id="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">BASIC SERVICES</a></li>
    <li><a href="#">OUR STAFF</a></li>
    <li><a href="#">CONTACT US</a></li>
</ul>

CSS 

#nav {
    text-align: justify;
    min-width: 500px;
}
#nav:after {
    content: '';
    display: inline-block;
    width: 100%;
}
#nav li {
    display: inline-block;
}
38 голосов
/ 31 декабря 2012

Этот действительно работает.Также имеется преимущество, заключающееся в том, что вы можете использовать медиазапросы для простого отключения горизонтального стиля - например, если вы хотите расположить их вертикально в мобильном телефоне.

HTML 

<ul id="nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

CSS 

​
#nav {
    display: table;
    height: 87px;
    width: 100%;
}

#nav li {
    display: table-cell;
    height: 87px;
    width: 16.666666667%;  /* (100 / numItems)% */
    line-height: 87px;
    text-align: center;
    background: #ddd;
    border-right: 1px solid #fff;
    white-space: nowrap;
}​

@media (max-width: 767px) {
    #nav li {
        display: block;
        width: 100%;
    }
}

http://jsfiddle.net/timshutes/eCPSh/416/

14 голосов
/ 20 мая 2014

если можете, используйте flexbox: 

<ul>
    <li>HOME</li>
    <li>ABOUT US</li>
    <li>SERVICES</li>
    <li>PREVIOUS PROJECTS</li>
    <li>TESTIMONIALS</li>
    <li>NEWS</li>
    <li>RESEARCH &amp; DEV</li>
    <li>CONTACT</li>
</ul>

ul {
  display: flex;
  justify-content:space-between;
  list-style-type: none;
}

jsfiddle: http://jsfiddle.net/RAaJ8/

Поддержка браузера на самом деле довольно хорошая (с префиксами и другими неприятными вещами): http://caniuse.com/flexbox

7 голосов
/ 26 ноября 2014

Идеальным решением будет:

  1. Автоматически масштабируется до ширины навигационного контейнера
  2. Поддержка динамического количества пунктов меню.

Используя простое меню ul внутри контейнера nav, мы можем создать решение, отвечающее вышеуказанным требованиям.

HTML 

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Basic Services</li>
    <li>Specialty Services</li>
    <li>Our Staff</li>
    <li>Contact Us</li>
  </ul>
</nav>

Во-первых, нам нужно заставить ul иметь полную ширину его контейнера nav. Для этого мы будем использовать псевдоэлемент :after с width: 100%.

Это прекрасно достигает нашей цели, но добавляет пробелы в конце от псевдоэлемента. Мы можем удалить этот пробел во всех браузерах через IE8, установив line-height для ul в 0 и установив его обратно в 100% для его li потомков. См. Пример CodePen и решение ниже:

CSS 

nav {
  width: 900px;
}

nav ul {
  text-align: justify;
  line-height: 0;
  margin: 0;
  padding: 0;
}

nav ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

nav ul li {
  display: inline-block;
  line-height: 100%;
}
3 голосов
/ 15 октября 2013

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

HTML 

<div id="container">
<ul>
    <li>HOME</li>
    <li>ABOUT US</li>
    <li>SERVICES</li>
    <li>PREVIOUS PROJECTS</li>
    <li>TESTIMONIALS</li>
    <li>NEWS</li>
    <li>RESEARCH &amp; DEV</li>
    <li>CONTACT</li>
</ul>
</div>

CSS 

div#container{
  width:900px;
  background-color:#eee;
    padding:20px;
}
ul {
    display:table;
    width: 100%;
    margin:0 0;
    -webkit-padding-start:0px; /* reset chrome default */
}
ul li {
    display:table-cell;
    height:30px;
    line-height:30px;
    font-size:12px;    
    padding:20px 10px;
    text-align: center;
    background-color:#999;
    border-right:2px solid #fff;
}
ul li:first-child {
    border-radius:10px 0 0 10px;
}
ul li:last-child {
    border-radius:0 10px 10px 0;
    border-right:0 none;
}

Вы можете отбросить первые / последние закругленные концы детей, очевидно, но я думаю, что они настоящие мошенники (как и ваш клиент;)

Ширина контейнера ограничивает горизонтальный список, но вы можете отказаться от него и просто применить абсолютное значение к UL, если хотите.

Поиграйтесь с ним, если хотите ..

http://jsfiddle.net/tobyworth/esehY/1/

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

Это должно сделать это для вас. 

<div id="nav-wrap">
    <ul id="nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

#nav-wrap {
    float: left;
    height: 87px;
    width: 900px;
}

#nav {
    display: inline;
    height: 87px;
    width: 100%;
}

.nav-item {
    float: left;
    height: 87px;
    line-height: 87px;
    text-align: center;
    text-decoration: none;
    width: 150px;

}
1 голос
/ 18 августа 2011

Я пробовал так много разных вещей и, наконец, нашел, что для меня лучше всего было просто добавить padding-right: 28px;

Я поэкспериментировал с отступом, чтобы получить нужное количество для равномерного размещения элементов.

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

Это то, что исправит модель флексбокса CSS, потому что она позволит вам указать, что каждый li получит равную долю оставшейся ширины.

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

Вы пытались установить ширину li, скажем, 16% с полем 0,5%? 

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  width: 16%;
  margin-right: 0.5%;
}

edit: я бы установил UL на 100% ширины:

nav ul { ширина: 100%; поле: 0 авто; }

0 голосов
/ 07 января 2013 
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#container { width: 100%; border: 1px solid black; display: block; text-align: justify; }
object, span { display: inline-block; }
span { width: 100%; }
</style>
</head>

  <div id="container">
    <object>
      <div>
      alpha
      </div>
    </object>
    <object>
      <div>
      beta
      </div>
    </object>
    <object>
      <div>
      charlie
      </div>
    </object>
    <object>
      <div>
      delta
      </div>
    </object>
    <object>
      <div>
      epsilon
      </div>
    </object>
    <object>
      <div>
      foxtrot
      </div>
    </object>
    <span></span>
  </div>
</html>
Страница:
...