Ответ 1

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

    #nav {
        text-align: justify;
        min-width: 500px;
    }
    #nav:after {
        content: '';
        display: inline-block;
        width: 100%;
    }
    #nav li {
        display: inline-block;
    }

<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>

Ответ 2

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

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/

Ответ 3

если вы можете, используйте 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

Ответ 4

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

• Автоматическое масштабирование по ширине контейнера навигации
• Поддержка динамического количества элементов меню.

Используя простое меню 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 psuedo-элемент с width: 100%.

Это обеспечивает нашу цель отлично, но добавляет конечные пробелы из psuedo-элемента. Мы можем удалить это пробел во всех браузерах через 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%;
}

Ответ 5

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

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/

Ответ 6

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

<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;

}

Ответ 7

Пробовали ли вы установить ширину лития, скажем, на 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%; margin: 0 auto; }

Ответ 8

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

Ответ 9

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

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

Ответ 10

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

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

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

Ответ 11

<!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>

Ответ 12

Я не решаюсь предлагать это, поскольку он злоупотребляет вами старым 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>

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