Comment construire des listes horizontales pour la programmation HTML5 et CSS3 - les nuls

Parfois, vous voulez des barres de boutons horizontales. Les listes HTML5 ayant tendance à être verticales, vous pourriez être tenté de penser qu'une liste horizontale est impossible. En fait, CSS3 fournit tout ce dont vous avez besoin pour convertir exactement le même HTML en une liste horizontale.

Il n'est pas nécessaire de montrer à nouveau le HTML car il n'a pas changé du tout. (CSS n'est pas grand?) Même le CSS n'a pas beaucoup changé:

#menu ul {marge-gauche: -2. 5em;} #menu li {list-style-type: none; largeur: 7em; text-align: centre; float: left;} #menu a {text-decoration: none; la couleur noire; bloc de visualisation; couleur de fond: #EEEEFF; boîte-ombre: 5px 5px 5px gris; marge inférieure: 2px; marge-droite: 2px; border-radius: 5px; border: 3px debut #EEEEFF;} #menu a: hover {background-color: #DDDDEE; boîte-ombre: 3px 3px 3px gris; border: none;}

Les modifications sont incroyablement simples:

1. Flotter chaque élément de la liste en donnant à chaque li une valeur flottante: left value:

   #menu li {list-style-type: none; float: à gauche; largeur: 5em; text-align: center;}
   

2. Déplacez la marge gauche de tout le ul en prenant la mise en forme margin-left des éléments li et en la transférant dans ul:

   #menu ul {margin-left: -2. 5em;}
   

3. Ajouter une marge de droite.

   Maintenant que la barre de boutons est horizontale, ajoutez un peu d'espace à la droite de chaque bouton pour qu'ils ne soient pas trop encombrés:

   marge-droite: 2px;