list-style-position

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
AnimierbarNein
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 and Counters 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

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,