web-dev-qa-db-fra.com

Étirer ul horizontal pour s'adapter à la largeur de div

Pour la navigation principale de mon site, il existe un div de 980px large avec un ul pour les liens de navigation principaux. J'essaie de faire en sorte que les liens de navigation s'étirent de manière égale à la largeur de la div.

<div style="width: 980px;">
<ul id="horizontal-style">
  <li><a href="#">Nav Item</a></li>
  <li><a href="#">Short Item</a></li>
  <li><a href="#">Really Long Nav Item</a></li>
  <li><a href="#">Nav Link</a></li>
  <li><a href="#">Another Link</a></li>
</ul>
</div>

Je suis en train de faire un css typique pour faire la liste ul horizontalement (float: left, display: block). Je peux modifier le rembourrage du li pour le rapprocher de très près, mais ce dont j'ai vraiment besoin, c'est d'un moyen de l'étirer pour qu'il s'adapte automatiquement. Possible?

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

csslayouthtmlhtml-lists
41
Alan

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

(ou avec table-layout: fixed pour une distribution uniforme de la largeur: http://jsfiddle.net/thirtydot/jwJBB/5/5/ )

Ceci 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 montage: http://jsfiddle.net/thirtydot/DsqWr/

107
thirtydot

Les gens détestent les tableaux pour les données non tabulaires, mais ce que vous demandez, c'est exactement en quoi les tableaux sont bons. <table width="100%">

5
Shad

manière inélégante (mais efficace): pourcentages d'utilisation

#horizontal-style {
    width: 100%;
}

li {
    width: 20%;
}

Cela ne fonctionne qu'avec l'exemple 5 <li>. Pour plus ou moins, modifiez votre pourcentage en conséquence. Si vous avez d'autres <li>s sur votre page, vous pouvez toujours affecter à ceux-ci une classe de "menu-li" afin que seuls ceux-ci soient affectés.

2
gailbear
#horizontal-style {
    width: 100%;
}

li {
    width: 20%;
}

Cette approche ne réagira pas car elle sera de 20% sur le plus petit écran, ce qui serait trop petit ou l’autre méthode de substitution serait une interrogation du média à différents points de rupture. 

1
K. Kaur