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 innerhalb der Inhalte 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. Da diese Eigenschaft vererbt wird, kann sie auf das Elternelement (normalerweise <ol> oder <ul>) gesetzt werden, um auf alle Listenelemente angewendet zu werden.
Wenn ein Block-Element das erste Kind eines Listenelements mit list-style-position: inside ist, wird das Block-Element auf der Zeile nach dem Marker-Kasten platziert.
Es ist oft bequemer, 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
Positionierung von Listenelementen setzen
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
Loading…
Siehe auch
list-styleKurzformlist-style-typeEigenschaftlist-style-imageEigenschaft::markerPseudoelement- CSS-Listen und Zähler Modul
- CSS-Zählerstile Modul