CSS-Listen

Ungeordnete Liste:

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Geordnete Liste:

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

HTML- und CSS-Listeneigenschaften

In HTML gibt es zwei Haupttypen von Listen:

  • Ungeordnete Liste ( <ul> ) - Die Listeitem werden durch Aufzählungssymbole gekennzeichnet
  • Geordnete Liste ( <ol> ) - Die Listeitem werden durch Ziffern oder Buchstabenmarken gekennzeichnet

CSS-Listeneigenschaften ermöglichen es Ihnen:

  • Verschiedene Aufzählungssymbole für sortierte Liste festlegen
  • Verschiedene Aufzählungssymbole für unsortierte Liste festlegen
  • Bild als Aufzählungssymbol der Liste festlegen
  • Hintergrundfarbe für Liste und Listeitem hinzufügen

Verschiedene Aufzählungssymbole

list-style-type Die Eigenschaft legt den Typ des Aufzählungssymbols der Liste fest.

Das folgende Beispiel zeigt einige verfügbare Aufzählungssymbole:

Example

ul.a {
  list-style-type: circle;
}
ul.b {
  list-style-type: square;
}
ol.c {
  list-style-type: upper-roman;
}
ol.d {
  list-style-type: lower-alpha;
}

Try it yourself

Anmerkung:Einige Werte werden für unsortierte Listen verwendet, während andere für sortierte Listen.

Bild als Aufzählungssymbol der Liste

list-style-image Diese Eigenschaft legt das Bild als Aufzählungssymbol der Liste fest:

Example

ul {
  list-style-image: url('sqpurple.gif');
}

Try it yourself

Positionierung des Aufzählungssymbols der Liste

list-style-position Die Eigenschaft legt die Position des Aufzählungssymbols der Liste fest.

"list-style-position: outside;" bedeutet, dass der Punkt der Aufzählungssymbole außerhalb der Liste positioniert wird. Der Anfang jeder Zeile der Liste wird vertikal ausgerichtet. Dies ist die Standardposition:

  • Coffee - A brewed beverage made from roasted coffee beans
  • Tea
  • Coca-cola

"list-style-position: inside;" This indicates that the bullet will be inside the list item. Since it is part of the list item, it will become part of the text and push the text out at the beginning:

  • Coffee - A brewed beverage made from roasted coffee beans
  • Tea
  • Coca-cola

Example

ul.a {
  list-style-position: outside;
}
ul.b {
  list-style-position: inside;
}

Try it yourself

Remove default settings

list-style-type:none These properties can also be used to remove markers/bullets. Note that lists also have default margins and paddings. To remove this content, add margin:0 and padding:0 :

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Try it yourself

List - Shorthand Property

list-style This property is a shorthand property. It is used to set all list properties in one declaration:

Example

ul {
  list-style: square inside url("sqpurple.gif");
}

Try it yourself

When using shorthand properties, the order of the property values is:

  • list-style-type(If the list-style-image is specified and for some reason the image cannot be displayed, this property value will be displayed)
  • list-style-position(Specify whether the list item marker should be displayed inside or outside the content flow)
  • list-style-image(Specify the image as the list item marker)

If any of the above property values are missing, the default value for the missing property (if there is one) will be inserted.

Set list color styles

We can also use color settings to style lists to make them more interesting.

Any style added to the <ol> or <ul> tags will affect the entire list, while properties added to the <li> tags will affect individual list items:

Example

ol {
  background: #ff9999;
  padding: 20px;
}
ul {
  background: #3399ff;
  padding: 20px;
}
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
ul li {
  background: #cce5ff;
  margin: 5px;
}

Result:

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Try it yourself

More examples

Custom list with red left border
This example demonstrates how to create a list with a red left border.
Full-width border list
Dieses Beispiel zeigt, wie man eine Liste ohne Bullet-Punkte mit Rahmen erstellt.
Alle verschiedenen Arten von Listeitem-Labels
Dieses Beispiel zeigt alle verschiedenen Arten von Listeitem-Labels in CSS.

Alle CSS-Listeneigenschaften

Eigenschaft Beschreibung
list-style Kurzschreibweise. Setzt alle Attribute der Liste in einer Deklaration.
list-style-image Gibt ein Bild als Markierung der Liste an.
list-style-position Definiert den Ort der Markierung der Liste (Punkt).
list-style-type Definiert den Typ der Markierung für die Liste der Regel.