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

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;

Die list-style-position Eigenschaft wird als einer 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 Hauptblockkastens. Dies ist der Standardwert für list-style.

Beschreibung

Diese Eigenschaft wird auf Listenelemente angewendet, d.h. Elemente mit display: list-item;. Standardmäßig schließt dies <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

Initialer Wertoutside
Anwendbar aufListenelemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

list-style-position = 
  inside   |
  outside

Beispiele

Position eines Listenelements festlegen

HTML

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

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