CSS list-style für ul und ol

CSS list-style: Kugeln, Bullets, square, Bilder für Listen mit ul

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.

Listen mit ul und ol sind eine alte HTML-Struktur und die Mittel, die Elemente mit CSS zu stylen, sind begrenzt.

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');
}

Kein CSS 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.

Für den Abstand der Marker-Box war ursprünglich marker-offset vorgesehen. marker-offset hat den Weg zum Standard nicht überstanden. So hat CSS nur wenige Optionen, die Elemente der Marker-Box zu stylen.

ul und ol bestehen aus zwei Boxen: Marker und Text

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 Punkte

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.

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.

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

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 muss das Öffnen des Menüs triggern.

1 2 3 1