Étirer horizontalement ul pour s’adapter à la largeur de div

Pour la navigation principale de mon site, il existe une largeur de 980 pixels avec une ul pour les principaux liens de navigation. J’essaie de faire en sorte que les liens de navigation s’étendent uniformément sur la largeur du div.

 

Je fais un css typique pour faire la liste ul horizontalement (float: left, display: block). Je peux modifier le rembourrage du li pour le rendre très proche, mais ce dont j’ai vraiment besoin est un moyen de l’étirer pour qu’il tienne automatiquement. Possible?

Modifier la difficulté 1: Impossible d’utiliser des tables. Difficulté 2: Chaque élément de navigation aura une largeur différente pour accueillir des noms de liens plus longs et plus courts.

C’est le moyen le plus simple de le faire: http://jsfiddle.net/thirtydot/jwJBd/

(ou avec table-layout: fixed pour une dissortingbution uniforme de la largeur: http://jsfiddle.net/thirtydot/jwJBd/59/ )

Cela ne fonctionnera pas dans IE7.

 #horizontal-style { display: table; width: 100%; /*table-layout: fixed;*/ } #horizontal-style li { display: table-cell; } #horizontal-style a { display: block; border: 1px solid red; text-align: center; margin: 0 5px; background: #999; } 

Ancienne réponse avant votre édition: http://jsfiddle.net/thirtydot/DsqWr/

Les gens détestent les tableaux pour les données non tabulaires, mais ce que vous demandez, c’est exactement à quoi les tables sont bonnes.

manière inélégante (mais efficace): utiliser des pourcentages

 #horizontal-style { width: 100%; } li { width: 20%; } 

Cela ne fonctionne qu’avec l’exemple 5

  • . Pour plus ou moins, modifiez votre pourcentage en conséquence. Si vous avez d’autres

  • sur votre page, vous pouvez toujours atsortingbuer une classe de “menu-li” à ces fichiers particuliers, afin qu’ils soient affectés uniquement.

     #horizontal-style { width: 100%; } li { width: 20%; } 

    Cette approche ne sera pas réactive car elle sera de 20% à l’écran le plus petit, ce qui serait trop petit ou l’autre moyen de remplacer serait une requête de média à différents points de rupture.