Retour en haut

Menu

Latest Thoughts twitter

 →  @delphiki

Syndication

Designs

Commentaires

Amis

[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 */
}

 
# office space golf course extension gurgaon, le vendredi 23 avril 2021 à 02:13:59

every

 
# buy csgo accounts, le vendredi 23 avril 2021 à 02:14:48

offered

 
# septic tank pumping jacksonville fl, le vendredi 7 mai 2021 à 18:08:11

Im really excited about this.. cant wait!

 
# lawn care, le mardi 2 août 2022 à 10:25:44

Great site! Thanks for sharing!

 
# subway surfers, le jeudi 15 juin 2023 à 20:24:57

great

 
# gta game, le jeudi 15 juin 2023 à 20:25:54

go thank

 
# clash games, le jeudi 15 juin 2023 à 20:26:28

thanks

 
# win million game, le jeudi 15 juin 2023 à 20:27:11

thanks keep going

 
# emmbrisbanertw, le lundi 7 août 2023 à 02:43:07

Great post! Well, if you're looking for a retaining wall builder around Brisbane, book us now! https://brisbaneretainingwalls.net/">High-quality retaining walls in the Brisbane area

 
# emmbrisbanertw, le lundi 7 août 2023 à 02:43:28

Great post! Well, if you're looking for a retaining wall builder around Brisbane, book us now! https://brisbaneretainingwalls.net/">High-quality retaining walls in the Brisbane area

 
# padel game, le mardi 19 septembre 2023 à 02:34:09

great post

 
# saudi gold price today, le samedi 14 octobre 2023 à 04:47:45

great post.

 
# uae gold price today, le samedi 14 octobre 2023 à 04:48:52

good post.

 
# hair vitamins, le samedi 14 octobre 2023 à 04:49:53

great post.

 
# stories, le vendredi 13 décembre 2024 à 20:17:10

very good post

 
# lsm9999, le mardi 30 septembre 2025 à 08:03:32

That is really fascinating, You?re an excessively skilled blogger. I?ve joined your feed and look ahead to looking for more of your great posts

 
# &#3607;&#3634;&#3591;&#3648;&#3586;&#3657;&#3634; lsm99, le mercredi 8 avril 2026 à 14:27:50

awesome material you fellas got these. I actually like the theme for the website along with how you organized a person who. It?s a marvelous job For certain i will come back and check out you out sometime

 
# https://lsm999dna.online/login, le mercredi 8 avril 2026 à 14:28:13

every post you publish is better than the last. I?m excited to see where you take this next

 
Ajouter un commentaire