Comment étendre les éléments de navigation horizontale html / css de manière uniforme et complète sur un conteneur spécifié

Question

J'aimerais tronçon 6 nav éléments uniformément à travers un 900px conteneur, avec une même quantité d'espace blanc entre les deux. Par exemple...

---| 900px Container |---

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

Actuellement, la meilleure méthode que je peux trouver pour ce faire est la suivante:

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

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

Le PROBLÈME est de deux ordres. Tout d'abord, il n'est pas vraiment le justifier, mais plutôt des écarts de la li tags uniformément au cours de la balise ul.. la création d'inégale d'espace blanc entre les éléments de menu comme "à la MAISON" ou "à PROPOS" et "grands", comme des "SERVICES de BASE".

Le deuxième problème est que la disposition des pauses si la valeur liquidative de l'élément est plus grand que 150px, les SERVICES SPÉCIALISÉS n'est - même si il ya plus de suffisamment d'espace pour l'ensemble de la valeur liquidative.

Quelqu'un peut-il résoudre ce pour moi? J'ai été à récurer le web pour trouver des solutions, et ils ont tous l'air de trouver à court. CSS / HTML seulement si cela est possible...

Merci!

Mise à JOUR (7/29/13): Utilisation de la table-cell est le meilleur moyen moderne pour mettre en œuvre cette disposition. Voir felix réponse ci-dessous. L' table cell de la propriété des œuvres sur 94% des navigateurs actuellement. Vous aurez à faire quelque chose sur IE7 et ci-dessous, mais sinon devrait être ok.

Mise à JOUR (7/30/13): Malheureusement, il y a une webkit bug que les impacts de cette si vous êtes à la combinaison de cette disposition avec les Media Queries. Pour l'instant, vous aurez pour éviter la modification de l'affichage " à la propriété. Voir Webkit Bug.

Mise à JOUR (7/25/14): Il y a une meilleure solution à ce ci-dessous maintenant, impliquant text-align: justify. L'utilisation est plus simple et vous permettra d'éviter le Webkit bug.

Answer 1

Utilisez text-align:justify sur le conteneur, ainsi il fonctionnera quel que soit le nombre d'éléments que vous avez dans votre liste (vous n'avez pas à calculer% widths pour chaque élément de la liste

VIOLON

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

Answer 2

Celui-ci fonctionne vraiment. L'avantage est également que vous pouvez utiliser des requêtes multimédia pour désactiver facilement le style horizontal, par exemple si vous souhaitez les empiler verticalement sur un téléphone mobile.

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/

Answer 3

si vous le pouvez, utilisez 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/

Le support du navigateur est en fait assez bon (avec les préfixes un autre truc méchant): http://caniuse.com/flexbox

Answer 4

Cela devrait le faire pour vous.

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

}
 

Answer 5

Avez-vous essayé de régler la largeur de li sur, par exemple, 16% avec une marge de 0,5%?

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

edit: Je voudrais définir l'UL à 100% largeur:

nav ul {width: 100%; marge: 0 auto; }