Hoe te maken: lijstgroep

Leer hoe je een basislijst kunt converteren naar een 'lijstgroep' met CSS.

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

Try it yourself

Hoe een lijstgroep te maken

Eerste stap - Voeg HTML toe:

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

Tweede stap - Voeg CSS toe:

ul {
  list-style-type: none; /* Verwijder de lijstpunten */
  padding: 0; /* Verwijder de inbuiging */
  margin: 0; /* Verwijder de marges */
}
ul li {
  border: 1px solid #ddd; /* Voeg een fijn randje toe aan elke lijstitem */
  margin-top: -1px; /* Voorkom dubbele randen */
  background-color: #f6f6f6; /* Voeg een grijs achtergrondkleur toe */
  padding: 12px; /* Voeg wat inbuiging toe */
}

Try it yourself

Related pages

Tutorial:CSS list