CSS list-style-position Eigenschaft
Die CSS-Eigenschaft list-style-position legt den Listenmarker innen oder außen im Listenelementfeld fest. Werte, Beispiele und Verwendung.
Die Eigenschaft list-style-position steuert, ob der Marker eines Listenelements (der Punkt oder die Zahl) innerhalb oder außerhalb des Listenelementfelds liegt. Es ist ein kleines, aber sichtbares Detail: Es bestimmt, ob umgebrochener Text in einem langen Listenelement unter dem Marker oder unter der ersten Textzeile ausgerichtet wird.
Diese Seite erklärt beide Werte, wie die Wahl Einzug und Textumbruch beeinflusst, wie die Eigenschaft mit der Kurzschreibweise list-style zusammenhängt und wann welcher Wert sinnvoll ist.
Anwendungsbereich
list-style-position wirkt auf jedes Element, dessen display list-item ist. Standardmäßig betrifft das <li>-Elemente. Da die Eigenschaft vererbt wird, setzt man sie üblicherweise einmalig auf der übergeordneten Liste — <ul> oder <ol> — und alle Elemente übernehmen sie.
| Anfangswert | outside |
|---|---|
| Gilt für | Listenelemente. |
| Vererbt | Ja. |
| Animierbar | Nein. |
| Version | CSS1 |
| DOM-Syntax | object.style.listStylePosition = "inside"; |
Syntax
list-style-position: inside | outside | initial | inherit;Beispiele
Beispiel mit dem Wert "inside"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.inside {
list-style-position: inside;
}
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>
</body>
</html>Ergebnis
![CSS list-style-position Eigenschaft](https://api.w3docs.com/uploads/media/default/0001/03/f9df27bcea2db32f3bb0f4290142c7eea8e2ff47.png "CSS list-style-position inside Beispiel" =420x)
Mit inside wird der Marker Teil des Inhalts des Elements. Er befindet sich innerhalb des Felds, sodass der Rahmen jedes <li> den Marker umschließt und umgebrochener Text in einer zweiten Zeile unter dem Marker statt unter der ersten Textzeile ausgerichtet wird.
Beispiel mit dem Wert "outside"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.outside {
list-style-position: outside;
}
li {
border: 1px solid #666;
padding: 5px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<h2>List-style-position property example</h2>
<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>Mit outside (dem Standardwert) wird der Marker in den Bereich links des Felds verschoben. Der Rahmen umschließt nun nur den Text, und umgebrochene Zeilen richten sich an der ersten Textzeile aus, nicht am Marker — das vertraute Aussehen der meisten Listen im Web.
Einen Wert wählen
outsideist die übliche Wahl. Umgebrochener Text bleibt sauber ausgerichtet, was bei langen Einträgen besser lesbar ist. Da der Marker außerhalb des Felds hängt, sollte für ihn mitpadding-leftder Liste genug Platz gelassen werden (Browser fügen zu diesem Zweck standardmäßig einen linken Innenabstand hinzu).insideist praktisch, wenn kein zusätzlicher linker Einzug zur Verfügung steht — zum Beispiel bei einer eng umrahmten Liste, einer Karte oder einem Layout, in dem jedes<li>einen eigenen sichtbaren Hintergrund oder Rahmen hat, der den Marker ebenfalls einschließen soll.
Ein häufiger Fehler ist das Entfernen des linken Innenabstands der Liste und dann das Wundern, warum outside-Marker abgeschnitten werden. Wenn padding-left: 0 gesetzt wird, kann der Marker außerhalb des sichtbaren Bereichs geschoben werden; dann sollte man zu inside wechseln oder genug Innenabstand wiederherstellen (siehe padding).
Verhältnis zur list-style-Kurzschreibweise
list-style-position ist eine der drei Komponenten der Kurzschreibweise list-style, zusammen mit list-style-type und list-style-image. Diese beiden Deklarationen sind gleichwertig:
/* Longhand */
ul {
list-style-type: square;
list-style-position: inside;
}
/* Shorthand — type then position */
ul {
list-style: square inside;
}Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| outside | Platziert das Markerfeld außerhalb des Hauptblockfelds. Dies ist der Standardwert der Eigenschaft. | Ausprobieren » |
| inside | Setzt das Markerfeld als erstes Inline-Feld im Hauptblockfeld. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |