Sommaire

Les listes

1. Les listes non ordonnées

Les listes non ordonnées, <ul>, permettent d’afficher des items avec des symboles qui sont des puces pleines et noires par défaut. Il n’y a pas de marge à gauche.

Voici la règle CSS utilisée :

ul { 
  list-style-type: disc; 
  margin-left: 1.25rem; 
}

Voici l’affichage obtenu :

images/C07-004.png

Si vous désirez ne pas afficher les puces, utilisez la classe .no-bullet.

<ul class="no-bullet"> 
  <li>Pommes</li> 
  <li>Poires</li> 
  <li>Bananes</li> 
</ul>

Voici l’affichage obtenu :

images/C07-007.png

Voici la règle CSS utilisée :

.no-bullet { 
  margin-left: 0; 
  list-style: none; 
}

2. Les listes ordonnées

Les listes ordonnées, <ol>, permettent d’afficher des items avec des chiffres par défaut. Il n’y a pas de marge à gauche.

Voici la règle CSS utilisée :

ol { 
  margin-left: 1.25rem; 
}

Voici l’affichage obtenu :

images/C07-005.png

3. Les listes de définition

Les listes de définition, <dl>, affichent les mots à définir, <dt>, en gras et les définitions, <dd>, sans marge gauche.

Voici les styles utilisés :

dl { 
  margin-bottom: 1rem; 
} 
dl dt { 
  margin-bottom: 0.3rem; 
  font-weight: bold; 
}

Voici l’affichage obtenu :

images/C07-006.png

4. Les propriétés communes

Les trois listes ...