To naprawdę działa. Ma również tę zaletę, że można użyć zapytań o media, aby łatwo wyłączyć styl poziomy - na przykład, jeśli chcesz umieścić je w pionie, gdy na telefonie komórkowym.

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/

Jeśli możesz, użyj 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/

Obsługa przeglądarki jest całkiem dobra (z przedrostkami i innymi paskudnymi rzeczami): http://caniuse.com/flexbox

Idealne rozwiązanie będzie:

1. automatycznie skaluj do szerokości kontenera nawigacyjnego
2. Obsługa dynamicznej liczby pozycji menu.

Używając prostego menu ul wewnątrz kontenera nav, możemy zbudować rozwiązanie spełniające powyższe wymagania.

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>

Najpierw musimy wymusić na ul pełną szerokość jego nav kontenera. Aby to osiągnąć, użyjemy :after psuedo-element z width: 100%.

To osiąga nasz cel doskonale, ale dodaje końcowe białe spacje z elementu psuedo. Możemy usunąć tę białą spację we wszystkich przeglądarkach przez IE8, ustawiając line-height z ul na 0 i ustawiając ją z powrotem na 100% na swoich dzieciach li. Zobacz przykład CodePen i rozwiązanie poniżej:

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

[2]} próbowałem wszystkich powyższych i znalazłem ich chcących. Jest to najprostsze, najbardziej elastyczne rozwiązanie, jakie mogłem wymyślić (dzięki wszystkim powyższym za inspirację).

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

Możesz zrzucić pierwsze/Ostatnie zaokrąglone końce, oczywiście, ale myślę, że są prawdziwe (tak jak twój Klient;)

Szerokość kontenera ogranicza poziomą listę, ale możesz to porzucić i po prostu zastosować wartość bezwzględną do UL, jeśli chcesz.

Fiddle with jeśli chcesz..

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

To powinno zrobić to za Ciebie.

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

}

Próbowałeś ustawić szerokość li na powiedzmy 16% z marżą 0,5%?

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

Edit: ustawiłbym UL na 100% szerokości:

Nav ul { Szerokość: 100%; margines: 0 auto; }

Jest to coś, co naprawi Model CSS flexbox, ponieważ pozwoli Ci określić, że każda li otrzyma równą część pozostałej szerokości.

Próbowałem tak wielu różnych rzeczy i w końcu okazało się, że to, co działa najlepiej dla mnie, to po prostu dodanie w padding-right: 28px;

Bawiłem się wyściółką, aby uzyskać odpowiednią ilość, aby równomiernie rozmieścić przedmioty.

Zamiast definiować szerokość, możesz po prostu umieścić lewy margines na li, aby odstępy były spójne i upewnić się, że margines+li mieści się w granicach 900px.

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

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

Waham się oferować to, ponieważ nadużywa ye olde html. Nie jest to dobre rozwiązanie, ale jest to rozwiązanie: Użyj tabeli.

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>

Nie po to zostały stworzone tabele, ale dopóki nie będziemy mogli rzetelnie wykonać tej samej akcji w w lepszy sposób myślę, że chodzi tylko o dopuszczalność.