Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Ü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
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

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

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!

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung ? ? ? ? ?

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

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SphinxKnight, fscholz, Sebastianz
Zuletzt aktualisiert von: SphinxKnight,