Menu de liste horizontale à espacement régulier et justifié

Question

J'ai recherché et trouvé aucune solution pour espacer une série de lis pour un menu de style de liste. J'ai réalisé que CSS seul ne pouvait pas le faire alors j'ai ajouté du javascript (jQuery). Je ne voulais pas les mêmes largeurs pour chaque LI, je voulais même un rembourrage sans espace restant. Si quelqu'un peut prendre ce concept et simplifier mon javascript affreux ou offre des alternatives s'il vous plaît le faire. Voir par exemple ici: http://www.valweb.com/menuTest/

Answer 1

Comme CSS seul peut le faire, mais ne peuvent pas vieux IEs, pourquoi ne pas utiliser display: table; (and table-cell) par défaut (votre 2ème exemple est tout simplement génial) et utiliser display: inline; zoom: 1; /* display: inline-block for IE */ padding: 0 Npx; pour IE 8 < avec l'aide des commentaires conditionnels ?
Et peut-être JS/jQuery si vous devez vraiment se soucier des utilisateurs IE6/7, seulement servi à eux.

PS: vous devez ajouter une règle pour : concentrer

.mainMenu li a:hover, 
.mainMenu li a:focus { 
    /* ... */ 
} 

comme E. Meyer states in the comments of its reset.css stylesheet: ;-)

/* remember to define focus styles! */ 
:focus { 
    outline: 0; 
}