Construire un menu en CSS
CHAPITRE 12
169
Alignement avec la propriété display
Cette technique simple consiste à transformer les blocs des listes (s’affichant par
défaut en colonne) en éléments en ligne (prenant place les uns à la suite des autres).
Pour cela, il suffit d’appliquer la déclaration display: inline aux éléments

du
menu, sans rien changer au bloc

ni aux liens . La figure 12-8 illustre le
résultat ainsi obtenu.
Des espaces latéraux de 5 pixels faciliteront la lecture de ce menu horizontal. La
déclaration margin: 0 5px; (notation courte pour margin: 0 5px 0 5px; et ne concernant que les marges à gauche et à droite) produira un tel effet. Les marges latérales étant admises pour les éléments en ligne, on pourra au choix appliquer cette
déclaration aux éléments
• ou ,
  CSS
  ul#menu {
  margin: 0;
  padding: 0;
  font: bold 1em Georgia, Times, serif;
  list-style-type: none;
  }
  #menu li {
  display: inline;
  }
  #menu a {
  color: green;
  text-decoration: none;
  }
  #menu a:hover, #menu a:focus {
  color: orange;
  }
  Figure 12–8
  Un menu horizontal (I)
  #menu li {
  display: inline;
  margin: 0 5px;
  }