6 nav öğeleri eşit 900px bir kap genelinde germek için, arasında boşluk bile bir miktar istiyorum. ... Örneği

---| 900px Container |---

---| HOME    ABOUT    BASIC SERVICES    SPECIALTY SERVICES    OUR STAFF    CONTACT US |---

Şu anda, bunu yapmak için bulabildiğim en iyi yöntem şudur:

nav ul {
  width: 900px; 
  margin: 0 auto;
}

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

Bu SORUNU iki yönlüdür. Öncelikle, değil mi gerçekten haklı, ama oldukça yayılır li etiketleri eşit boyunca ul etiketi oluşturmak için.. düzensiz boşluk arasında küçük menü öğeleri gibi "HOME" ya da "HAKKINDA" ve daha büyük olanlar gibi "TEMEL HİZMETLER".

İkinci sorun, düzeni eğer nav öğesi ÖZEL HİZMETLER tüm nav için yeterli alan daha var olsa bile - ki 150px, büyükse keser.

Kimse benim için bu çözebilir? Çözümler için web sitesini tarıyordum ve hepsi eksik kaldın. CSS / HTML... sadece mümkünse

Teşekkürler!

GÜNCELLEME (7/29/13): tablo-hücre Kullanarak bu düzeni uygulamak için en modern yoludur. Felix'in aşağıda cevap bakın. table cell özelliği works on 94% of browsers şu anda. Hakkında bir şey yapmak için IE 7 ve altında olacaksınız, ama diğer her şey iyi olmalıdır.

GÜNCELLEME (7/30/13): ne yazık ki, eğer Medya Sorguları ile bu düzeni birleştirerek, bu etkiler aynı zamanda y bir hata var. Şimdi değişen önlemek için olacak için 'ekran' özelliği. See Webkit Bug.

GÜNCELLEME (7/25/14): şimdi aşağıda bu daha iyi bir çözüm text-align içeren Var: haklı. Bu kullanarak daha basit ve aynı zamanda Y hata kaçınmak gerekir.

Kullanım konteyner, kaç kişi listenizde var olursa olsun bu iş olacak bu şekilde (her madde için % genişlikleri çalışmak zorunda değilsin. text-align:justify

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