web-dev-qa-db-fra.com

Comment répartir les éléments de liste HTML de manière homogène dans une liste non ordonnée

Je souhaite que mes éléments li qui forment un menu horizontal soient répartis uniformément sur la largeur de mon élément ul. J'ai normalement float mes li éléments à gauche et ajoute une marge. Mais comment puis-je définir l'espacement approprié pour qu'il s'étende de la gauche de mon élément ul au bord droit?

Voici un exemple jsfiddle d'un menu non distribué à travers la ul.

L'espacement doit être le même entre chaque li. Mais les éléments li peuvent avoir des longueurs différentes.

csscss3css-floathtml-listsspacing
19
at.

Encore une autre approche. C’est quelque chose que j’utilise lorsqu’on essaie d’étendre un menu uniformément sur la page. C'est bien si vous avez un menu dynamique qui changera en fonction de certaines conditions (comme une page d'administrateur qui n'apparaît que si vous êtes connecté en tant qu'administrateur).

CSS:

nav div ul {
display: table;
width: 100%;
list-style: none;
}
nav div ul li {
display: table-cell;
text-align: center;
}
nav div ul li a {
display: block;
}

J'étais un peu paresseux et je viens de copier cela à partir de mon projet actuel. Vous devrez donc l'adapter à votre code, mais c'est ma méthode préférée pour créer un menu horizontal.

EDIT: Vous pouvez donner l’impression que cela couvre mieux en ajoutant ceci:

CSS:

nav div ul li:first-child {
    text-align: left;
}
nav div ul li:last-child {
    text-align: right;
}

encore une fois, non testé, juste tapé.

43
FireCrakcer37

J'ai deux réponses pour vous.

Si vous voulez vous en tenir au modèle float:

Votre élément ul doit avoir la propriété overflow définie (sans cette propriété, votre ul (ou tout élément contenant des éléments flottants) ne reçoit pas de hauteur (il s'agit du comportement attendu, notez que: http://www.quirksmode.org /css/clearing.html ) et sera donc par défaut à une hauteur de 0. Cela aura pour effet que, si vous définissez des couleurs d'arrière-plan différentes pour votre ulli et son corps, l'arrière-plan de votre ul ne s'affichera ).

ul {
    text-align: center;
    width: 300px;
    overflow: auto;
}

Vos éléments li doivent avoir des largeurs définies, sinon - en tant qu’éléments flottants - leur largeur sera définie sur ce qu’ils contiennent. J'ai utilisé des pixels ci-dessous, mais vous pouvez également utiliser une valeur en pourcentage.

li {
    float: left;
    margin: 5px 0 5px 0;
    width: 100px;
    text-align: center;
}

_/Utilisez la propriété display:inline-block pour vos éléments li (si la prise en charge d'anciens navigateurs n'est pas une priorité). IE 7 ne prend pas en charge cette fonctionnalité. Il n'est donc pas utile si vous avez besoin d'une prise en charge multi-navigateurs étendue, mais cela crée l'effet souhaité. Assurez-vous ensuite de supprimer les espaces entre vos balises </li> et <li>. seront comptés dans la largeur totale et apparaîtront comme des espaces entre les éléments.

L'un des avantages de cette méthode est que vous n'avez pas besoin de connaître ou de définir la largeur du conteneur ul si vous utilisez des largeurs en pourcentage sur vos éléments li contenus, vous obtenez toujours le centrage gratuitement avec la propriété text-align que vous avez déjà. . Cela rend votre mise en page très sensible.

Voici le balisage et CSS qui fonctionnent comme je le demande:

Balisage:

<ul>
<li>banana</li><li>orange</li><li>Apple</li>
</ul>

CSS:

li {
    display:inline-block;
    margin:5px 0 5px 0;
    width:33.33%;
}
ul {
    text-align: center;
}
  • Si vous préférez conserver le balisage sur plusieurs lignes, vous devrez manipuler les marges gauche et droite de vos éléments li dans le fichier CSS.
  • Si vous ajoutez des éléments li, vous devrez modifier le pourcentage de largeur à associer (par exemple, avec quatre éléments li dans votre balisage, vous devrez modifier votre CSS afin qu'il ait une largeur de 25% pour chacun).
1
Matt Wagner

Vous devrez définir la largeur des éléments li pour les forcer à remplir l'espace:

ul {
    width: 100%;
}
li {
    float: left;
    width: 33%;
}

( Fiddle démo )

Si vous ajoutez d'autres éléments à la liste, vous devrez ajuster le pourcentage de largeur. Par exemple, avec quatre éléments, la largeur sera de 25%.

1
whostolemyhat

Je ne comprends pas bien votre question, alors je suppose que vous voudrez peut-être ceci:

li {
    border:solid 1px red;
    clear:both;
    display:block;
    float: left;
    margin: 5px;
    width:100%;
}
ul {
    text-align: center;
    width:300px;
}
0
Wilf