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 Juli 2015.
Die list-style-position CSS Eigenschaft legt die Position des ::marker relativ zu einem Listenelement fest.
Probieren Sie es aus
list-style-position: inside; list-style-position: outside; <section class="default-example" id="default-example"> <div> <p>NASA Notable Missions</p> <ul class="transition-all" id="example-element"> <li>Apollo 11: First Human Landing</li> <li>City in Space: The International Space Station</li> <li>Great Observatory: The Hubble Space Telescope</li> <li>Everlasting Mars Rovers</li> </ul> </div> </section> .default-example { font-size: 1.2rem; } #example-element { width: 100%; background: #be094b; color: white; } section { text-align: left; flex-direction: column; } hr { width: 50%; color: lightgray; margin: 0.5em; } .note { font-size: 0.8rem; } .note a { color: #009e5f; } @counter-style space-counter { symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D"; suffix: " "; } 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 Hauptblockbereichs. Dies ist der Standardwert fürlist-style.
Beschreibung
Diese Eigenschaft wird auf Listenelemente angewendet, d.h. Elemente mit display: list-item;<li> Elemente. Da diese Eigenschaft vererbt wird, kann sie auf das übergeordnete Element gesetzt werden (normalerweise <ol> oder <ul>), um sie auf alle Listenelemente anzuwenden.
Wenn ein Blockelement das erste Kind eines Listenelements ist, das als list-style-position: inside deklariert ist, wird das Blockelement auf der Linie nach der Marker-Box platziert.
Es ist oft praktischer, die Kurzschreibweise 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 des Listenelements festlegen
HTML
<p>List 1</p> <ul class="inside"> <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> <p>List 2</p> <ul class="outside"> <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> <p>List 3</p> <ul class="inside-img"> <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
Loading…
Siehe auch
list-styleKurzschreibweiselist-style-typeEigenschaftlist-style-imageEigenschaft::markerPseudo-Element- CSS Listen und Zähler Modul
- CSS Zählerstile Modul