web-dev-qa-db-fra.com

Comment justifier une liste horizontale?

J'ai une barre de navigation horizontale comme celle-ci:

<ul id = "Navigation">
    <li><a href = "About.html">About</a></li>
    <li><a href = "Contact.html">Contact</a></li>
    <!-- ... -->
</ul>

J'utilise CSS pour supprimer les points de balle et le rendre horizontal.

#Navigation li
{
    list-style-type: none;
    display: inline;
}

J'essaie de justifier le texte pour que chaque lien soit réparti de manière égale afin de remplir l'intégralité de l'espace de ul. J'ai essayé d'ajouter text: justify aux sélecteurs li et ul, mais ils sont toujours alignés à gauche.

#Navigation
{
    text-align: justify;
}

#Navigation li
{
    list-style-type: none;
    display: inline;
    text-align: justify;
}

C'est étrange, car si j'utilise text-align: right, il se comporte comme prévu.

Comment puis-je répartir les liens de manière uniforme?

htmlcsshtml-listsjustify
41
Maxpm

Approche moderne - Flexboxes CSS3

Maintenant que nous avons CSS3 flexboxes , vous n'avez plus besoin de recourir à des astuces et à des solutions de contournement pour que cela fonctionne. Heureusement, le support du navigateur a parcouru un long chemin }, et la plupart d'entre nous peuvent commencer à utiliser des flexbox.

Définissez simplement display de l'élément parent sur flex, puis modifiez la propriété justify-content en space-between ou space-around afin d'ajouter de l'espace entre/autour des éléments flexbox enfants. Ajoutez ensuite des préfixes de fournisseur supplémentaires pour prise en charge accrue du navigateur .

Utilisation de justify-content: space-between - (exemple ici) :

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-between;
}
<ul class="menu">
    <li>About</li>
    <li>Contact</li>
    <li>Contact Longer Link</li>
    <li>Contact</li>
</ul>

Utilisation de justify-content: space-around - (exemple ici) :

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-around;
}
<ul class="menu">
    <li>About</li>
    <li>Contact</li>
    <li>Contact Longer Link</li>
    <li>Contact</li>
</ul>

31
Josh Crozier

Vous devez utiliser un "truc" pour que cela fonctionne.

Voir:http://jsfiddle.net/2kRJv/

HTML:

<ul id="Navigation">
    <li><a href="About.html">About</a></li>
    <li><a href="Contact.html">Contact</a></li>
    <!-- ... -->
    <li class="stretch"></li>
</ul>

CSS:

#Navigation
{
    list-style-type: none;
    text-align: justify;
    height: 21px;
    background: #ccc
}

#Navigation li
{
    display: inline
}
#Navigation .stretch {
    display: inline-block;
    width: 100%;

    /* if you need IE6/7 support */
    *display: inline;
    zoom: 1
}

Détails sur la supercherie IE6/7: Le bloc en ligne ne fonctionne pas dans Internet Explorer 7, 6

35
thirtydot

Ceci peut également être réalisé en utilisant un pseudo-élément sur l'élément ul:

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: justify;
}

ul:after {
    content: "";
    width: 100%;
    display: inline-block;
}

li {
    display: inline;
}
24
Ben Foster

Il suffit de faire:

ul { width:100%; }
ul li {
  display:table-cell;
  width:1%;
}
4
jakosik

Cela pourrait convenir à vos besoins:

#Navigation{
}
#Navigation li{
    list-style-type: none;
    text-align: center;
    float: left;
    width: 50%; /*if 2 <li> elements, 25% if 4...*/
}

demo: http://jsfiddle.net/KmqzQ/

4
Sparkup

HTML

<ul id="Navigation">
    <li><a href="#">The Missing Link</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Riluri</a></li>
    <li><a href="#">Contact us</a></li>
    <!-- ... -->
    <li class="stretch"></li>
</ul>

CSS

#Navigation {
    list-style-type: none;
    text-align: justify;
    height: 21px;
    background: #ccc
}

#Navigation li{
    display: inline
}

#Navigation li a {
    text-align: left;
    display:inline-block;
}

#Navigation .stretch {
    display: inline-block;
    width: 100%;

    /* if you need IE6/7 support */
    *display: inline;
    zoom: 1
}

Voir la démo: http://jsfiddle.net/2kRJv/392/

3
Mark

Vous devez séparer les éléments <li>, sinon la justification ne fonctionnera pas.

For example, this:

<ul><li>test</li><li>test</li></ul>


needs to be like this:
<ul>
<li>test</li>
<li>test</li>
</ul>

ou du moins avez des espaces entre les balises <li> d'ouverture et de fermeture.

1
Adrian Cumpanasu

La réponse marquée ne fonctionne pas s'il y a un espace blanc.

La meilleure réponse ici fonctionne avec les espaces blancs Comment * justifie-je * vraiment * un menu horizontal en HTML + CSS?

0
Art S

Ce blog a une solution suffisamment robuste. Il faut quelques légères modifications pour permettre une navigation ul/li, cependant:

#Navigation {
    width: 100%;
    padding: 0;
    text-align: justify;
    font-size: 0;
    font-size: 12px\9; /* IE 6-9 */
}
#Navigation>li {
    font-size: 12px;
    text-align: center;
    display: inline-block;
    zoom: 1;
    *display: inline; /* IE only */
}
#Navigation:after {
    content:"";
    width: 100%;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

http://jsfiddle.net/mblase75/9vNBs/

0
Blazemonger