CSS/Eigenschaften/Listenformatierung/list-style-position

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft list-style-position können Sie bestimmen, ob die mit list-style-type oder list-style-image festgelegten Aufzählungszeichen innerhalb oder außerhalb des Listenlements positioniert werden.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0
Beispiel ansehen …
ul       { max-width: 15em; border: 1px solid blue; }
li       { background-color: lightblue; margin: 2px; }
.outside { list-style-position: outside; }
.inside  { list-style-position: inside; }
<ul class="outside">
  <li>Berlin</li>
  <li>London</li>
  <li>Paris</li>
</ul>
<ul class="inside">
  <li>Berlin</li>
  <li>London</li>
  <li>Paris</li>
<ul class="outside">
  <li>Angela Merkel, seit 2005 Bundeskanzlerin</li>
  <li>Frank-Walter Steinmeier, 2005-2009 und 2013-2017 Bundesminister des Auswärtigen</li>
  <li>Manuela Schwesig, 2013-2017 Bundesministerin für Familie, Senioren, Frauen und Jugend</li>
</ul>
<ul class="inside">
  <li>Angela Merkel, seit 2005 Bundeskanzlerin</li>
  <li>Frank-Walter Steinmeier, 2005-2009 und 2013-2017 Bundesminister des Auswärtigen</li>
  <li>Manuela Schwesig, 2013-2017 Bundesministerin für Familie, Senioren, Frauen und Jugend</li>
</ul>
Bei einzeiligen Listenelementen ist der Unterschied nur dann wirklich wahrnehmbar, wenn die betreffenden Listen unmittelbar untereinander stehen. Interessant ist diese Eigenschaft erst, wenn die Texte der Aufzählungselemente länger werden, weil es dann tatsächlich unterschiedliche Darstellungsformen gibt. So wird bei list-style-position:inside nur die erste Zeile eingerückt um Platz für das Aufzählungszeichen zu schaffen.

Folgende Angaben sind möglich:

  • inside (Standardwert) Aufzählungszeichen innerhalb des Listenelements, nur erste Zeile wird eingerückt
  • outside (Standardwert) Aufzählungszeichen außerhalb des Listenelements
  • initial setzt Wert auf Standardwert zurück
  • inherit Wert wird vom Elternelement übernommen