CSS-Eigenschaft list-style-position

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.