list-style-position
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die list-style-position CSS Eigenschaft legt die Position des ::marker relativ zu einem Listenelement fest.
Probieren Sie es aus
Syntax
/* Keyword values */
list-style-position: inside;
list-style-position: outside;
/* Global values */
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: revert-layer;
list-style-position: unset;
Die list-style-position Eigenschaft wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.
Werte
inside-
Der
::markerist das erste Element unter den Inhalten des Listenelements. outside-
Der
::markerbefindet sich außerhalb des Hauptblockkastens. Dies ist der Standardwert fürlist-style.
Beschreibung
Diese Eigenschaft wird auf Listenelemente angewendet, d.h. Elemente mit display: list-item;<li> Elemente ein. Da diese Eigenschaft vererbt wird, kann sie auf das übergeordnete Element gesetzt werden (normalerweise <ol> oder <ul>), um auf alle Listenelemente angewendet zu werden.
Wenn ein Blockelement das erste Kind eines Listenelements ist, das als list-style-position: inside deklariert ist, wird das Blockelement auf der Zeile nach der Marker-Box platziert.
Es ist oft praktischer, die Kurzform list-style zu verwenden.
Formale Definition
| Anfangswert | outside |
|---|---|
| Anwendbar auf | Listenelemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
list-style-position =
inside |
outside
Beispiele
Position eines Listenelements festlegen
HTML
<ul class="inside">
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="outside">
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="inside-img">
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
.inside {
list-style-position: inside;
list-style-type: square;
}
.outside {
list-style-position: outside;
list-style-type: circle;
}
.inside-img {
list-style-position: inside;
list-style-image: url("star-solid.gif");
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Lists and Counters Module Level 3 # list-style-position-property |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
list-styleKurzformlist-style-typeEigenschaftlist-style-imageEigenschaft::markerPseudoelement- CSS Listen und Zähler Modul
- CSS Zählerstile Modul