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 eines der unten aufgeführten Schlüsselwort-Werte angegeben.
Werte
inside-
Der
::markerist das erste Element unter den Inhalten des Listenelements. outside-
Der
::markerbefindet sich außerhalb der Hauptblockbox. Dies ist der Standardwert fürlist-style.
Beschreibung
Diese Eigenschaft wird auf Listenelemente angewendet, d.h. auf Elemente mit display: list-item;<li> Elemente ein. Da diese Eigenschaft vererbt wird, kann sie auf dem Elternelement (normalerweise <ol> oder <ul>) eingestellt werden, um auf alle Listenelemente angewendet zu werden.
Wenn ein Block-Element das erste Kind eines Listenelements ist, das als list-style-position: inside deklariert wurde, wird das Block-Element in der Zeile nach der Markenbox platziert.
Es ist oft praktischer, die Kurzform list-style zu verwenden.
Formaler Definition
| Anfangswert | outside |
|---|---|
| Anwendbar auf | Listenelemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
list-style-position =
inside |
outside
Beispiele
Position der Listenelemente 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-styleKurzformlist-style-typeEigenschaftlist-style-imageEigenschaft::markerPseudo-Element- CSS-Listen und Zähler Modul
- CSS-Zählerstile Modul