Comment créer : groupe de listes

Apprenez à utiliser CSS pour convertir une liste de base en un "groupe de listes".

  • Adele
  • Agnes
  • Billy
  • Bob
  • Calvin
  • Christina
  • Cindy

Essayer vous-même

Comment créer un groupe de listes

Première étape - Ajoutez HTML :

<ul>
  <li>Adele</li>
  <li>Agnes</li>
  <li>Billy</li>
  <li>Bob</li>
  <li>Calvin</li>
  <li>Christina</li>
  <li>Cindy</li>
</ul>

Deuxième étape - Ajoutez CSS :

ul {
  list-style-type: none; /* Supprimez les points de liste */
  padding: 0; /* Supprimez l'espace intérieur */
  margin: 0; /* Supprimez l'espace extérieur */
}
ul li {
  border: 1px solid #ddd; /* Ajoutez une fine bordure à chaque élément de liste */
  margin-top: -1px; /* Évitez les bords doubles */
  background-color: #f6f6f6; /* Ajoutez une couleur de fond grise */
  padding: 12px; /* Ajoutez un certain espace intérieur */
}

Essayer vous-même

Pages liées

Tutoriel :Liste CSS