Ungeordnete HTML -Listen
Das HTML <ul>-Tag definiert eine ungeordnete (Aufzählungszeichen) Liste.
Ungeordnete HTML-Liste
Eine ungeordnete Liste beginnt mit dem <ul>Tag. Jedes Listenelement beginnt mit dem
<li>Tag.
Die Listenelemente werden standardmäßig mit Aufzählungszeichen (kleine schwarze Kreise) markiert:
Beispiel
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ungeordnete HTML-Liste – Wählen Sie Listenelement-Markierung
Die CSS list-style-type-Eigenschaft wird verwendet, um den Stil der Listenelementmarkierung zu definieren. Es kann einen der folgenden Werte haben:
| Value | Description |
|---|---|
| disc | Sets the list item marker to a bullet (default) |
| circle | Sets the list item marker to a circle |
| square | Sets the list item marker to a square |
| none | The list items will not be marked |
Beispiel - Disk
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Beispiel - Kreis
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Beispiel - Quadrat
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Beispiel - Keine
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Verschachtelte HTML-Listen
Listen können verschachtelt werden (Liste in Liste):
Beispiel
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
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: #111111;
}
</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>
Tipp: In unserem CSS-Tutorial erfahren Sie noch viel mehr über CSS .
Kapitelzusammenfassung
- Verwenden Sie das HTML
<ul>-Element, um eine ungeordnete Liste zu definieren - Verwenden Sie die CSS-
list-style-typeEigenschaft, um die Listenelementmarkierung zu definieren - Verwenden Sie das HTML-
<li>Element, 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 | Description |
|---|---|
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <dl> | Defines a description list |
| <dt> | Defines a term in a description list |
| <dd> | Describes the term in a description list |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz .