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.

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

Browser Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Hinweis: Es gibt Unterschiede im Verhalten der Browser, wenn ein Blockelement das erste Element innerhalb eines Listenelements ist, das als list-style-position: inside angegeben wird. Chrome und Safari platzieren dieses Element auf der gleichen Linie wie die Aufzählungszeichenbox, wobei Firefox, Internet Explorer und Opera es auf der nächsten Zeile platzieren. Für weitere Informationen hierzu siehe den zugehörigen Mozilla Fehlerbericht und ein Beispiel.

Siehe auch

• list-style, list-style-type, list-style-image