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 CSS-Eigenschaftlist-style-position legt die Position des::marker relativ zu einem Listenelement fest.

Probieren Sie es aus

list-style-position: inside;

list-style-position: outside;

<section>  <div>    <p>NASA Notable Missions</p>    <ul>      <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

css

/* 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;

Dielist-style-position-Eigenschaft wird als eines der unten aufgeführten Schlüsselwortwerte angegeben.

Werte

inside: Der::marker ist das erste Element unter den Inhalten des Listenelements.
outside: Der::marker befindet sich außerhalb des Haupt-Block-Element. Dies ist der Standardwert fürlist-style.

Diese Eigenschaft wird auf Listenelemente angewendet, d.h. Elemente mitdisplay: list-item;.Standardmäßig umfasst dies<li>-Elemente. Da diese Eigenschaft vererbt wird, kann sie auf dem übergeordneten Element festgelegt werden (normalerweise<ol> oder<ul>), damit sie auf alle Listenelemente angewendet wird.

Wenn ein Block-Element das erste Kind eines Listenelements ist, das alslist-style-position: inside deklariert ist, wird das Block-Element auf der Linie nach der Marker-Box platziert.

Es ist oft praktischer, die Kurzformlist-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 von Listenelementen festlegen

HTML

html

<p>List 1</p><ul>  <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>  <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>  <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

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");}