HTML <li>-Element
Das HTML <li>-Element definiert einzelne Einträge in einer HTML-Liste. Die <ul>- und <ol>-Elemente definieren jeweils ungeordnete und geordnete Listen. Das <menu>-Element definiert das Kontextmenü. Listeneinträge werden in Menüs und ungeordneten Listen üblicherweise mit Aufzählungszeichen dargestellt. In geordneten Listen erscheinen sie meist mit einer Nummer oder einem Buchstaben links.
Syntax
Das <li>-Element wird immer in Paaren verwendet. Der Inhalt wird zwischen dem öffnenden (<li>) und dem schließenden (</li>) Tag geschrieben. Das <li>-Element ist ein Flow-Content-Element; es beginnt in einer neuen Zeile und nimmt die gesamte verfügbare Breite ein.
Beispiel für geordnete und ungeordnete Listen:
Menüliste — Beispiel für das HTML <li>-Element — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>Ordered list</p>
<ol>
<li>Appetizers</li>
<li>Main Course</li>
<li>Salads</li>
</ol>
<p>Unordered list</p>
<ul>
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
</body>
</html>Das value-Attribut
Das value-Attribut gibt eine Nummer für einen Listeneintrag an. Es wird nur mit dem <li>-Element innerhalb einer geordneten Liste verwendet. Beachten Sie, dass in modernem HTML5 das start-Attribut auf dem <ol>-Element bevorzugt wird, um die Startnummer der Liste zu steuern.
DANGER
Der Wert des value-Attributs muss eine gültige ganze Zahl sein.
Beispiel für das value-Attribut:
HTML <li>-Element mit der list-style-type-Eigenschaft | Beispiel | W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<ol>
<li value="5">Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>Formatieren des Listeneintrags-Markers
Um das <li>-Element zu stylen, können Sie die CSS-Eigenschaften list-style, list-style-type, list-style-image und list-style-position verwenden.
Beispiel zum Formatieren des Listeneintrags-Markers:
list-style-type-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
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;
}
</style>
</head>
<body>
<h1>The list-style-type property</h1>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>Mit der CSS-Eigenschaft list-style-image können Sie Aufzählungszeichen durch ein Bild ersetzen.
Beispiel für einen Bild-Marker:
list-style-image-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-image: url("https://www.w3docs.com/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
}
</style>
</head>
<body>
<h2>List-style-image property example</h2>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>Die CSS-Eigenschaft list-style-position legt fest, ob der Listeneintrag-Marker innerhalb oder außerhalb der Listeneintrags-Box erscheinen soll.
Beispiel für die Positionierung eines Markers innen und außen:
list-style-position-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.inside {
list-style-position: inside;
}
li {
border: 1px solid #666;
padding: 5px;
}
.outside {
list-style-position: outside;
}
li {
border: 1px solid #666;
padding: 5px;
}
</style>
</head>
<body>
<h2>List-style-position property example</h2>
<p>Here the list-style is positioned "inside".</p>
<ul class="inside">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p>Here the list-style is positioned "outside".</p>
<ul class="outside">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
type | 1, A, a, I, i, disc, square, circle | Definiert die Aufzählungsart für geordnete oder ungeordnete Listen. Dieses Attribut ist in HTML5 veraltet. Verwenden Sie stattdessen die CSS-Eigenschaften list-style-type oder list-style-image. |
value | number | Gibt den numerischen Wert des Listeneintrags an. Negative Werte sind erlaubt. Es funktioniert nur mit dem <li>-Element innerhalb einer geordneten Liste. |
Das <li>-Element unterstützt die Globalen Attribute und die Ereignisattribute.
So formatieren Sie ein HTML <li>-Element
{
"tag_name": "li"
}Praxis
Was definiert das HTML <li>-Element?