Menu horizontal/transversal 100% HTML/CSS?

Question

Comment faire 100% horizontal cross-browser menu HTML/CSS?
1. garder propre HTML, li liste
2. Aucune image/javascript, tableless, normes W3C de conformité
Exemple invalide exemple:

/*CSS doesn't make `block` right/left space between `li` items (see attached image)*/ 
#nav{ 
    text-align:justify; 
} 
#nav li{ /*border:1px solid #000; margin-right:1px; margin-left:1px;*/ 
    display:inline-block; white-space:nowrap; 
} 
#nav li#span{ /*hack to make 100% horizontal*/ 
    display:inline-block; width:100%; height:1px; 
} 
*html #nav li,*html #nav li#span,*+html #nav li,*+html #nav li#span{ /*IE6/7 hacks tah are not working*/ 
    display:inline; 
} 

et:

<div id="nav"> 
    <ul> 
     <li>Home <!--unfortunately it doesn't work without space after each list, 
               need for some solution--></li> 
     <li>Services </li><!--don't want to add style for each list separated--> 
     <li>Portfolio </li> 
     <li>Clients </li> 
     <li>Articles </li> 
     <li>Contact Us </li> 
     <li id="span"></li><!--don't like to add any extra tag (like this), 
           but other way it doesn't work, 
           need for some solution--> 
    </ul> 
</div> 

Answer 1

CSS2.1 table, table-cell pris en charge depuis IE8 et rendu amélioré grâce table-layout:fixed. Malheureusement, il a des restrictions de mise en page comme margin.

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

« Sous la « fixe » méthode de mise en page, la table entière peut être rendue une fois la première ligne de la table a été téléchargé et analysé. Cela peut accélérer le temps de rendu sur la « automatique » méthode de mise en page, mais le contenu de la cellule suivante ne peut pas tenir dans les largeurs de colonne fournies.Toute cellule qui a du contenu qui déborde utilise la propriété de débordement à déterminez s'il faut découper le contenu de débordement. "

Démo http://jsbin.com/AgiMoxu/9/edit

<style> 
ol { 
    display: table; 
    width: 100%; 
    border-collapse: collapse; 
    table-layout: fixed; 
    text-align: center; 
    white-space: nowrap; 
} 
li { 
    overflow: hidden; 
    display: table-cell; 
    padding: 10px; 
    text-overflow: ellipsis; 
} 
</style> 
<ol> 
    <li>Home 
    <li>Section two 
    <li>Section three 
    <li>Another section 
    <li>A section with a longer name 
    <li>Section six 
    <li>This is section seven 
    <li>Section 8 
</ol> 

Answer 2

Essayez cette version un peu moins hacky:

<style type="text/css">  
#nav ul { 
    list-style: none; 
    display: table; 
    *display: block; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

#nav ul li { 
    display: table-cell; 
    *display: inline; 
    width: auto; 
    min-width: 100px; 
    margin: 1px 0; 
    padding: 2px auto; 
    *padding: 2px 40px; 
    border: 1px solid #999; 
    text-align: center; 
    white-space: nowrap; 
} 
</style> 
<div id="nav"> 
    <ul> 
     <li>Home</li> 
     <li>Services</li> 
     <li>Portfolio</li> 
     <li>Clients</li> 
     <li>Articles</li> 
     <li>Contact Us</li> 
    </ul> 
</div> 

C'est IE7 qui cause les problèmes.

Answer 3

Il existe une solution pour cela, même sans tables. Ce n'est pas vraiment beau, mais ça marche. L'astuce consiste à les commander en tant qu'éléments en ligne dans un bloc de texte justifié. Les mots d'un texte justifié feront ce que vous voulez avec vos étiquettes. Mais comme la dernière ligne des blocs de texte justifiés est alignée à gauche, vous devez terminer le bloc avec une nouvelle ligne.

Un exemple non testé est ici:

<style> 
.label { 
    display: inline-block; 
} 
</style> 

<div style="display: block; width: 100%; text-align: justify"><div class="label">label1</div> 
<div class="label">label2</div> 
<div class="label">label3</div><br /></div> 

Avertissement # 1: il ne fonctionnera pas, si le parent du div externe (que je ne mets pas dans cet exemple) est width: auto. Avertissement # 2: vous ne devriez pas avoir d'espace avant le premier, et après le dernier -s et leurs parents! Mais entre les étiquettes internes, vous devez avoir (au moins un) espace.

Avertissement # 3: il mettra une nouvelle ligne inutile après votre dernière div. Si c'est un problème pour vous, il existe plusieurs solutions pour le faire disparaître, mais elles ne sont pas encore meilleures.