Positionierung der Zeilen in einer Aufzählung

[Sigrid]

Hallo,

wie kann ich in dem Beispiel

<ul>
  <li>blablabla</li>
  ........
</ul>

den Einzug der Zeilen "li" verkleinern oder vergrößern?

[Matthias Scharwies]

Servus!

Hallo,

wie kann ich in dem Beispiel

<ul>
  <li>blablabla</li>
  ........
</ul>

den Einzug der Zeilen "li" verkleinern oder vergrößern?

Mit margin-left

Herzliche Grüße
Matthias Scharwies

[Sigrid]

Besten Dank,

ich habe festgestellt, dass die Angabe margin-left: -1rem;

die gleich Wirkung hat, wenn ich es bei ul oder li angebe.

Was ist zu empfehlen?

[Rolf B]

Hallo Sigrid,

das ul Element hat ab Werk einen oberen und unteren Margin von 1em und ein linksseitiges^[1] Padding von 40px.

D.h. mit einer padding-left padding-inline-start Angabe für ul kannst Du die Einrückung des Texts für die List-Items beeinflussen. Ein margin-left margin-inline-start oder margin-inline-end für das ul ist eher nicht nötig - oder nur dann, wenn das ul Element eine Border hat oder eine Hintergrundfarbe und es darum geht, damit von anderen Elementen Abstand zu halten (wofür aber zumeist andere Layouttechniken wie Grid angebracht sind).

Der Marker (also der Punkt vor den List-Items) ist davon unabhängig. Du kannst ihn innerhalb oder außerhalb des li-Elements platzieren (list-style-position), und du kannst ihn eingeschränkt über das ::marker-Pseudoelement stylen. Safari spielt dabei aber noch kaum mit, siehe den Caniuse-Link im Wiki.

Standardmäßig platzieren die Browser die Listenpunkte außerhalb der List-Items, mit einem bestimmten Abstand vor Beginn des li-Texts. D.h. wenn Du den Einzug vergrößerst, wandern die Listenpunkte mit. Um den Abstand der Listenpunkte vom Text zu vergrößern, kannst Du den li-Elementen ein entsprechendes Padding hinzufügen. Willst Du ihn verkleinern, musst Du mit ::marker arbeiten.

li::marker {
   content: "• ";
}

Der Punkt ist Unicodezeichen U+2022.

Ob es ein Unicodezeichen gibt, das dem regulären Listen-Bullet entspricht, weiß ich nicht; ich habe gerade keins gefunden. Leichtfertig mit font-size spielen sollte man aber nicht, das macht auch die Zeile höher.

Rolf

---

1. Bei rechts-nach-links Sprachen natürlich rechtsseitig, deshalb die Verwendung von padding-inline-start statt padding-left ↩︎

[Gunnar Bittersmann]

@@Rolf B

Mit margin-left

das ul Element hat ab Werk einen oberen und unteren Margin von 1em und ein linksseitiges Padding von 40px.

D.h. mit einer padding-left Angabe für ul kannst Du die Einrückung des Texts für die List-Items beeinflussen.

Ist das so? Ich glaube nicht, dass sich die Beatles davon beeinflussen lassen.

Der Browser-Default ist ul, ol { padding-inline-start: 40px }.

🖖 Live long and prosper

[Ryuno-Ki]

Moin Gunnar,

Mit margin-left

das ul Element hat ab Werk einen oberen und unteren Margin von 1em und ein linksseitiges Padding von 40px.

D.h. mit einer padding-left Angabe für ul kannst Du die Einrückung des Texts für die List-Items beeinflussen.

Ist das so? Ich glaube nicht, dass sich die Beatles davon beeinflussen lassen.

Der Browser-Default ist ul, ol { padding-inline-start: 40px }.

Ich war gerade dabei, einen Antwort-Beitrag aufzumachen, um darauf hinzuweisen, dass mit -inline-start als logische Einheit sich einigen Ärger erspart werden kann (etwa mit Besuchenden, bei denn die Sprache von rechts nach links läuft).

Kann ich mir jetzt sparen. Danke.

Gruß,

[Rolf B]

Hallo Ryuno-Ki,

ich habe meinen Beitrag jetzt editiert und angepasst. Ob jemand, der nach Basics fragt, dabei mitkommt, ist wie immer die große Frage.

Die Berücksichtigung der RTL-Problematik ist ein Thema für Fortgeschrittene.

Rolf

[Auge]

Hallo

Die Berücksichtigung der RTL-Problematik ist ein Thema für Fortgeschrittene.

Jein. Die Frage wird sich Anfängern natürlich nicht von selbst stellen. Wer eine Seite nur in LTR-Sprachen veröffentlicht, wird nicht daran denken, dass es noch andere Schreibrichtungen gibt.

Wenn man aber statt padding-left von vornherein padding-inline(-start) und die anderen zu diesem „Kanon“ gehörigen Eigenschaften benutzt, stellt sich die Frage überhaupt nicht ^[1]. Für Entwickler, die die richtungsabhängigen Eigenschaften gewohnt sind, mag das eine Umstellung sein, aber es ist keine große. Alle anderen sollten meiner Meinung nach heutzutage gleich die logischen Eigenschaftsnamen erlernen und anwenden.

Es ist ja nicht nur die Schreibrichtung in verschiedenen Sprachen, die damit berücksichtigt wird, es ist auch die Formatierung von zu kippenden Elementen. Wenn man ein Element zum Beispiel um 90° entgegen dem Uhrzeigesinn kippt, wird padding-top zu padding-left. Wenn man aber stattdessen padding-block-start benutzt hat, bleibt der Padding automagisch auf der richtigen Seite des Elements.

Tschö, Auge

---

1. Natürlich ist das nicht alles, was zur Berücksichtigung aller möglichen Schreibrichtungen gehört. ↩︎