Wie man erstellt: Liste gruppiert

Lernen Sie, wie man eine grundlegende Liste in eine "Liste gruppiert" umwandelt.

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

Try it yourself

Wie man Listengruppen erstellt

Erster Schritt - Fügen Sie HTML hinzu:

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

Zweiter Schritt - Fügen Sie CSS hinzu:

ul {
  list-style-type: none; /* Entfernen Sie die Aufzählungspunkte */
  padding: 0; /* Entfernen Sie den Innenabstand */
  margin: 0; /* Entfernen Sie den Außenabstand */
}
ul li {
  border: 1px solid #ddd; /* Fügen Sie jeder Liste eine feine Umrandung hinzu */
  margin-top: -1px; /* Verhindern Sie die Doppelframe */
  background-color: #f6f6f6; /* Fügen Sie eine graue Hintergrundfarbe hinzu */
  padding: 12px; /* Fügen Sie einigen Innenabständen hinzu */
}

Try it yourself

Related pages

Tutorial:CSS list