CSS list-style-position-Eigenschaft

Die list-style-position-Eigenschaft legt fest, ob der Marker eines Listenelements innerhalb oder außerhalb der Listenelement-Box positioniert werden soll.

Die list-style-position-Eigenschaft wird auf Listenelemente und Elemente angewendet, für die display auf „list-item“ festgelegt ist. Standardmäßig umfasst dies <li>-Elemente. Sie kann auch auf übergeordnete Elemente angewendet werden: <ol> oder <ul>.

Anfangswert	outside
Anwendbar auf	Listenelemente.
Vererbbar	Ja.
Animierbar	Nein.
Version	CSS1
DOM-Syntax	object.style.listStylePosition = "inside";

Syntax

css

list-style-position: inside | outside | initial | inherit;

Beispiel für die list-style-position-Eigenschaft mit dem Wert „inside“:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .inside {
        list-style-position: inside;
      }
      li {
        border: 1px solid #666;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>List-style-position property example</h2>
    <p>Here the list-style is positioned "inside".</p>
    <ul class="inside">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS list-style-position Property

Im obigen Beispiel sind die Listenelemente innerhalb der Box positioniert.

Beispiel für die list-style-position-Eigenschaft mit dem Wert „outside“:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .outside {
        list-style-position: outside;
      }
      li {
        border: 1px solid #666;
        padding: 5px;
        margin-bottom: 15px;
      }
    </style>
  </head>
  <body>
    <h2>List-style-position property example</h2>
    <p>Here the list-style is positioned "outside".</p>
    <ul class="outside">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Ausführen
outside	Platziert die Marker-Box außerhalb der Hauptblock-Box. Dies ist der Standardwert dieser Eigenschaft.	Ausführen »
inside	Legt die Marker-Box als erste Inline-Box innerhalb der Hauptblock-Box fest.	Ausführen »
initial	Weist der Eigenschaft ihren Standardwert zu.	Ausführen »
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Praxis

Was gibt die CSS-Eigenschaft 'list-style-position' an?

Die Position des Listenmarkers.Der Stil des Listenmarkers.Die Farbe des Listenmarkers.Ob der Listenmarker innerhalb oder außerhalb des Inhaltsflusses angezeigt werden soll.

CSS list-style-position-Eigenschaft ​

Syntax ​

Beispiel für die list-style-position-Eigenschaft mit dem Wert „inside“: ​

Ergebnis ​

Beispiel für die list-style-position-Eigenschaft mit dem Wert „outside“: ​

Werte ​