CSS Listen
HTML gibt Ihnen ul und ol. CSS entscheidet, wie diese Listen aussehen — runde Punkte, Quadrate, Zahlen, Buchstaben oder gar kein Marker, wenn Sie ein Navigationsmenü bauen.
Ein list-style-Toolkit
📊 Listenstile auf einen Blick
| Eigenschaft | Alltagsjob |
|---|---|
list-style-type |
Markerform oder Nummerierungsstil (disc, square, decimal…) |
list-style-position |
Marker innerhalb oder außerhalb der Content-Box |
list-style-image |
Bild als Marker nutzen |
list-style |
Kurzschreibweise für Typ, Position und Bild |
list-style: none |
Marker entfernen (häufig für Nav-Menüs) |
Marker gehören zum Listeneintrag, aber Sie setzen Listenstile meist auf ul oder ol, damit jedes li dasselbe Aussehen erbt.
Aufzählungszeichen-Typen
Ungeordnete Listen starten oft mit disc. Wechseln Sie zu circle oder square, wenn das Design ruhiger oder schärfer wirken soll.
Bullet-Marker-Typen
cssul.features {
list-style-type: square;
}
ul.notes {
list-style-type: circle;
}Nummerierte und buchstabierte Listen
Geordnete Listen nutzen Nummerierungsstile. decimal ist die Alltagswahl; lower-alpha oder upper-roman passen zu Gliederungen und formellen Schritten.
Typen geordneter Listen
cssol.steps {
list-style-type: decimal;
}
ol.outline {
list-style-type: lower-alpha;
}Markerposition — innen oder außen
list-style-position: outside (üblicher Default) hängt den Marker in den Rand. inside zieht ihn in den Textfluss — nützlich in engen Karten.
Marker im Fluss
cssul.card-list {
list-style-position: inside;
padding-left: 0;
}Marker für Menüs entfernen
Navigationslisten wollen selten Bullets. list-style: none entfernt sie — danach Abstand mit padding/margin setzen.
Saubere Nav-Liste
cssnav ul {
list-style: none;
margin: 0;
padding: 0;
}Bildmarker und Kurzschreibweise
Ein kleines Bild kann den Bullet ersetzen. Bevorzugen Sie winzige Assets. Die list-style-Kurzform setzt Typ, Position und Bild in einer Zeile.
Bildmarker + Kurzform
cssul.custom {
list-style: square outside none;
}
ul.icons {
list-style-image: url("/icons/check.svg");
}Eine ruhige Listen-Gewohnheit
Wählen Sie pro Liste einen klaren Marker-Stil, halten Sie Bildmarker klein, und nach none für Menüs Padding zurücksetzen, damit Einträge sauber ausrichten.
Lesbare Artikelliste
cssarticle ul {
list-style-type: disc;
list-style-position: outside;
padding-left: 1.25rem;
line-height: 1.6;
}Selbst ausprobieren
- Eine
ulauflist-style-type: squaresetzen. - Eine
olmitlower-alphastylen. list-style-position: insideauf eine kurze Kartenliste.- Bullets von
nav ulmitlist-style: noneund Padding null entfernen. - Winziges
list-style-imageversuchen, dann auf Typ zurückfallen.
Häufige Fehler
- Erwarten, dass
coloraufliallein komplexe Marker überall ändert list-style: nonenutzen, aber großes Default-Padding stehen lassen- Riesige
list-style-image-Dateien, die die Zeile dominieren - Eine
ulper CSS nummerieren statt semantischesol, wenn Reihenfolge zählt - Diese Lektion mit Link-Hover/Visited vermischen (vorherige Sitzung)
Kurzfassung
list-style-typewählt Bullets oder Nummerierungsstilelist-style-positionplatziert Marker innen oder außenlist-style: noneentfernt Marker für Menüslist-style-imageund dielist-style-Kurzform ergänzen- Marker ruhig halten und Padding nach dem Entfernen gezielt setzen
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt