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

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