CSS-Eigenschaft list-style-position

Die Eigenschaft list-style-position definiert, ob der Listenmarker für ein Listenelement innerhalb oder außerhalb des Listeneintrags erscheinen soll.

Die Eigenschaft list-style-image wird auf Listenelemente und Elemente, deren Eigenschaft display auf "list-item" eingestellt ist, angewendet. Standardmäßig beinhaltet es die Elemente <li>. Es kann auch auf die übergeordneten Elemente angewendet werden: <ol> oder <ul>.

Anfangswert outside
Gilt für Listenelemente
Geerbt Ja
Animierbar Nein
Version CSS1
DOM Syntax object.style.listStylePosition = "inside";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokumentst</title>
    <style>
      .inside {
      list-style-position: inside;
      }
      li {
      border: 1px solid #666;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft list-style-position</h2>
    <p>Hier ist list-style "inside" positioniert.</p>
    <ul class="inside">
      <li>Listenelement 1</li>
      <li>Listenelement 2</li>
      <li>Listenelement 3</li>
    </ul>
  </body>
</html>

Im angegebenen Beispiel sind die Listenelemente innerhalb der Box positioniert.

Hier ist ein weiteres Beispiel, wo die Listenelemente außerhalb platziert werden:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokumentst</title>
    <style>
      .outside {
      list-style-position: outside;
      }
      li {
      border: 1px solid #666;
      padding: 5px;
      margin-bottom: 15px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft list-style-position</h2>
    <p>Hier ist list-style "outside" positioniert.</p>
    <ul class="outside">
      <li>Listenelement 1</li>
      <li>Listenelement 2</li>
      <li>Listenelement 3</li>
    </ul>
  </body>
</html>

Values

Value Description
outside Stellt das Markierungsfeld aus dem Haupt-Blackbox heraus ein. Es ist der Standardwert dieser Eigenschaft.
inside Stellt die Markerbox als erste Inline-Box in der Haupt-Blackbox ein.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Übe dein Wissen

Was bewirkt die CSS-Eigenschaft 'list-style-position'?
Finden Sie das nützlich?