HTML -Ungeordnete Listen
Das HTML-Tag <ul> definiert eine ungeordnete Liste (mit Aufzählungszeichen).
Ungeordnete HTML-Liste
Eine ungeordnete Liste beginnt mit dem Tag <ul>. Jedes Listenelement beginnt mit dem Tag <li>.
Die Listenelemente werden standardmäßig mit Aufzählungszeichen (kleinen schwarzen Kreisen) markiert:
Ungeordnete HTML-Liste – Wählen Sie Listenelementmarkierung
Die CSS-Eigenschaft list-style-type wird verwendet, um den Stil der Listenelementmarkierung zu definieren. Es kann einen der folgenden Werte haben:
| Wert | Beschreibung |
|---|---|
| disc | Setzen Sie die Listenelementmarkierung auf ein Aufzählungszeichen (Standard) |
| circle | Setzen Sie die Listenelementmarkierung auf einen Kreis |
| square | Setzen Sie die Listenelementmarkierung auf ein Quadrat |
| none | Die Listenelemente werden nicht markiert |
Beispiel - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Beispiel - Circle
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Beispiel — Square
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Beispiel — None
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Verschachtelte HTML-Listen
Listen können verschachtelt werden (Liste innerhalb der Liste):
Beispiel
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Try it Yourself »
Hinweis: Ein Listenelement (<li>) kann eine neue Liste und andere HTML-Elemente wie Bilder und Links usw. enthalten.
Horizontale Liste mit CSS
HTML-Listen können mit CSS auf viele verschiedene Arten gestaltet werden.
Eine beliebte Möglichkeit besteht darin, eine Liste horizontal zu gestalten, um ein Navigationsmenü zu erstellen:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Try it Yourself »
Tipp: Viel mehr über CSS erfahren Sie in unserem CSS-Tutorial.
Kapitelzusammenfassung
- Verwenden Sie das HTML-Element
<ul>, um eine ungeordnete Liste zu definieren - Verwenden Sie die CSS-Eigenschaft
list-style-type, um die Listenelementmarkierung zu definieren - Verwenden Sie das HTML-Element
<li>, um ein Listenelement zu definieren - Listen können verschachtelt werden
- Listenelemente können andere HTML-Elemente enthalten
- Verwenden Sie die CSS-Eigenschaft
float:left, um eine Liste horizontal anzuzeigen
HTML-Listen-Tags
| Tag | Beschreibung |
|---|---|
| <ul> | Definiert eine ungeordnete Liste |
| <ol> | Definieren Sie eine geordnete Liste |
| <li> | Definiert ein Listenelement |
| <dl> | Definiert eine Beschreibungsliste |
| <dt> | Definiert einen Begriff in einer Beschreibungsliste |
| <dd> | Beschreibt den Begriff in einer Beschreibungsliste |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz.
