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.
Initialwert | outside |
---|---|
Anwendbar auf | Listenelemente |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Syntax
Formale Syntax:list-style-position =
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