Come creare: elenco di gruppi

Impara come usare CSS per trasformare una lista base in un “elenco di gruppi”.

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

Prova da solo

Come creare un elenco di gruppi

Primo passo - Aggiungi HTML:

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

Secondo passo - Aggiungi CSS:

ul {
  list-style-type: none; /* Rimuovi i puntini di elenco */
  padding: 0; /* Rimuovi le margini interne */
  margin: 0; /* Rimuovi i margini esterni */
}
ul li {
  border: 1px solid #ddd; /* Aggiungi un bordo sottile a ogni elemento della lista */
  margin-top: -1px; /* Evita i bordi bilaterali */
  background-color: #f6f6f6; /* Aggiungi un colore di sfondo grigio */
  padding: 12px; /* Aggiungi alcune margini interne */
}

Prova da solo

Pagine correlate

Tutorial:Elenco CSS