Hur skapar man: lista-grupp

Lär dig hur man använder CSS för att konvertera en grundläggande lista till en "lista-grupp".

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

Prova själv

Hur skapar man en lista

Steg 1 - Lägg till HTML:

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

Steg 2 - Lägg till CSS:

ul {
  list-style-type: none; /* Ta bort punktlistor */
  padding: 0; /* Ta bort inre marginalia */
  margin: 0; /* Ta bort yttre marginalia */
}
ul li {
  border: 1px solid #ddd; /* Lägg till en tunn solid kantlinje */
  margin-top: -1px; /* Förhindra dubbelramning */
  background-color: #f6f6f6; /* Lägg till en grå bakgrundsfärg */
  padding: 12px; /* Lägg till något innerymd */
}

Prova själv

Relaterade sidor

Tutorial:CSS lista