list-style-position

Übersicht

Die list-style-position CSS Eigenschaft gibt die Position der Aufzählungszeichenbox innerhalb der Hauptblockbox an.

Es ist oft einfacher, die Kurzform Eigenschaft list-style zu verwenden.

Initialwertoutside
Anwendbar aufListenelemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Syntax

Formale Syntax: inside | outside
list-style-position: inside
list-style-position: outside

list-style-position: inherit

Werte

outside
Die Aufzählungszeichenbox liegt außerhalb der Hauptblockbox.
inside
Die Aufzählungszeichenbox ist die erste Inlinebox der Hauptblockbox, nach der der Inhalt des Elements steht.

Beispiel

HTML

<ul class="one"> List 1
  <li>List Item 1-1</li>
  <li>List Item 1-2</li>
  <li>List Item 1-3</li>
  <li>List Item 1-4</li>
</ul>
<ul class="two"> List 2
  <li>List Item 2-1</li>
  <li>List Item 2-2</li>
  <li>List Item 2-3</li>
  <li>List Item 2-4</li>
</ul>
<ul class="three"> List 3
  <li>List Item 3-1</li>
  <li>List Item 3-2</li>
  <li>List Item 3-3</li>
  <li>List Item 3-4</li>
</ul>

CSS

.one {
  list-style:square inside;
}

.two {
  list-style-position: outside;
  list-style-type: circle;
}

.three {
  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
  list-style-position: inherit;
}

Result

Spezifikationen

Spezifikation Status Anmerkung
CSS Lists Module Level 3
Die Definition von 'list-style-position' in dieser Spezifikation.		 Arbeitsentwurf Keine Änderung
CSS Level 2 (Revision 1)
Die Definition von 'list-style-position' in dieser Spezifikation.		 Empfehlung Ursprüngliche Definition

Browser Kompatibilität

BCD tables only load in the browser

Siehe auch