Retour en haut

[CSS] Répartir horizontalement et équitablement les éléments d'une liste

posté le mercredi 18 août 2010 à 19:24:13 par delphiki :: Web

Vous avez une liste de la sorte :

<ul id="menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Et vous voulez en faire un menu horizontal, dont les éléments seront répartis équitablement sur toute la largeur de votre bloc conteneur ?

Rien de plus simple, un petit peu de CSS :

ul#menu{
  display:table;
}
ul#menu li{
  display:table-cell;
  text-align:center;
}

Et le tour est joué ! ;-)


Commentaires :

# 7-User, le jeudi 19 août 2010 à 21:52:15

Ça marche pas o_O

 
# delphiki, le vendredi 20 août 2010 à 12:07:09

Quel navigateur ?

 
# 7-User, le vendredi 20 août 2010 à 15:16:53

Opera 10.60

 
# delphiki, le vendredi 20 août 2010 à 15:42:47

J'ai la même chose, et ça passe très bien chez moi.

 
# Gp2mv3, le jeudi 4 novembre 2010 à 20:14:31

Bien sympa comme astuce.
Merci.

 
# Thierry, le lundi 6 décembre 2010 à 16:24:28

Si la longueur (nombre de caractères) de Item1, 2, 3 et 4 n'est pas la même, l'espace entre chacun des Item va être différent. Comment faire pour que l'espace entre chacun soit la même ?

 
# delphiki, le lundi 6 décembre 2010 à 16:27:58

@Thierry, tu as essayé en fixant les largeurs de tes items ?

ul#menu li{
display:table-cell;
text-align:center;
width:XXpx; /* ta largeur */
}

 
Ajouter un commentaire