CSS list-style für ul und ol

CSS list-style: Kugeln, Bullets, square

CSS list-style wirkt auf HTML-Listen – sowohl auf ungeordnete Listen (HTML ul) als auf geordnete Listen bzw. Aufzählungen (HTML ol). list-style ist die Kurzform für list-style-type, list-style-image und list-style-position.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Listen gestalten – list-style

Geordnete und ungeordnete Listen gehört zu den wichtigsten Werkzeugen des Webdesigns: Listen stehen nicht nur für Aufzählungen, sondern fast immer stehen Listen hinter den Navigationsmenüs und häufig auch hinter Slideshows.

Listen mit ul und ol sind eine alte HTML-Struktur und die Mittel, Listen mit CSS zu gestalten, sind quasi grenzenlos. Listen werden nicht nur für schlichte Aufzählungen genutzt, sondern sind die Basis für das Menü der Navigationsleiste, für Slideshows mit wechselnden Bildern und Cards.

list-style-type
ungeordnete Listen ul mit disk, circle, square, geordneten Liste ol mit Ziffer oder Buchstaben
list-style-position
Aufzählungssymbol in die Box für Listenelemente einziehen
list-style-image
setzt ein Bild anstelle des Listensymbols in ul-Listen
none
kein Listensymbol

list-style ist die Kurzform für alle drei Werte.

  • Mann unter Feuer

    Der abgewrackte Navy-Soldat Creasy übernimmt einen Bodyguard-Job in Mexiko.

  • Die Peanuts Der Film

    Charlie Brown, Snoopy und Lucy haben ihren ersten Auftritt als computeranimierte Helden.

  • Stargate Origins

    1930 kämpfen Professor Langford und seine Tochter noch mit den Rätseln des antiken Artefakts.

ul {
    list-style: inside url('arrow-right.svg');
}

CSS ::marker für die Marker-Box

Listen bestehen aus zwei Boxen: der Box für die Aufzählungssymbole (marker) und der Box für die Listenelemente.

::marker stylt die Elemente der marker-box.

HTML List Marker Box
  • lass Rot sein
  • lieber Grün?
  • und zu guter letzt
li::marker  {
	color:cyan; 
	font-size:3em;
}

::marker wirkt auf alle Merkmale der Schrift (font-size, font-family, …), auf white-space, color, content und sogar auf animation und transition. Safari unterstützt allerdings content, animation und transition nicht.

Für den Abstand der Marker-Box war ursprünglich marker-offset vorgesehen. marker-offset hat den Weg zum Standard nicht überstanden. Stattdessen setzt text-indent einen Abstand zwischen die Listensymbole und den Inhalt des Listeninhalts.

Abstand der Symbole zur Textbox

text-indent ist der Ersatz für das fehlende CSS der Marker-Box und zieht den Text der li-Boxen ein oder vergrößert den Abstand zwischen Bullets bzw. Ordnungszahlen und Aufzählungstext.

  1. Mann unter Feuer

    Der abgewrackte Navy-Soldat Creasy übernimmt einen Bodyguard-Job in Mexiko.

  2. Die Peanuts Der Film

    Charlie Brown, Snoopy und Lucy haben ihren ersten Auftritt als computeranimierte Helden.

  3. Stargate Origins

    1930 kämpfen Professor Langford und seine Tochter noch mit den Rätseln des antiken Artefakts.

ol.hanging {
    text-indent: 2em;
}

<ol class="hanging">
 …
</ol>

text-indent funktioniert allerdings nur für die erste Zeile eines Blocks. Alle folgenden Zeilen haben wieder den von ul oder ol vorgegebenen hängenden Einzug.

Listen ohne Listenpunkt

Ungeordnete Listen sitzen hinter Navigationsmenüs und die wichtigste Aufgabe für CSS list-style ist das Unterdrücken der Listenkugel oder Bullets.

Die klassische Methode ist list-style: none für das ul-Element.

ul { list-style: none }   // Zeigt Listen ohne Punkt an

Alternativ können die Kugeln beim li-Element mit display: block entfernt werden. li führt zwar zu einem Zeilenumbruch, ist aber kein Blockelement, sondern ein list-item.

 
li { display: block } // ab IE8

Für die Listenelemente li werden dieselben Stile verwendet wie für die Formatierung von Fließtext – font-family, margin, padding, border … li hat keinen eigenen Stil.

Geordnete Listen (ol): Ziffen, Buchstaben, Glyphen

CSS zeigt geordnete Listen mit Ziffern, Buchstaben und Glyphen. Der Listenpräfix ist rechts am Punkt ausgerichtet.

  1. Montag
  2. Dienstag
  3. Mittwoch
  4. Donnerstag
  5. Freitag
<ol style="list-style:upper-roman">
   <li>Montag</li>
   <li>Dienstag</li>
   <li>Mittwoch</li>
</ol>

Listen ul mit Bildern

  • Montag
  • Dienstag
  • Mittwoch
ul.symbol { list-style: url(sym.png) }

Listen linksbündig

Der Abstand der Listenpunkte vom linken Rand des umfassenden Blocks ist keine Eigenschaft für ul oder ol, sondern resultiert aus CSS margin oder padding. Alle Browser ziehen Listenelemente nach rechts ein.

Schema: Listen Einzug von links

Mit

ul { padding-left: 0; }

rutschen die Inhalte der li-Element nach links unter den umgebenden Text, aber die Bullets bzw. die Ordnungszahlen liegen dann vor dem linken Rand der umfassenden Box.

Schema: Listen padding-left: 0

Mit margin-left: 0.6em rutschen die Listenkugeln bzw. die Ordnungszahlen an den linken Rand des Texts.

Schema: Listen padding-left: 0.6em

CSS für Listitems in Navigationsmenüs

Dank der hierarchischen Struktur und der einfachen Verschachtelung ist die Kombination von ul- und li-Tags zu einem beliebten Werkzeug für die Navigation geworden. Selbst aufklappende Navigationsmenüs sind mit einfachen CSS-Regeln, einer Prise CSS transition, aber ohne Javascript möglich.

ul.demo ul { 
    position:absolute; 
    height:0; max-height: 0; 
    transition: max-height 1s;
}
ul.demo li:hover ul {
    height:auto;
    max-height: 450px;
}

Für die Menüs auf kleinen Monitoren mit Touchscreen reicht CSS alleine nicht, denn hier gibt es kein Hovern mit der Maus. Ein Javascript-Event wie ontouch oder onclick müsste das Öffnen des Menüs triggern.

Auf kleinen Monitoren setzt das Webdesign heute anstelle von Drop-Down-Menüs vorzugsweise ein Hamburger-Icon und hält das Navigationsmenü der Seite schlicht und einfach.