CSS-Liste bündig: Wie Text einrücken nach Zeilenumbruch?

[Thomas R.]

Hallo!

Ich habe eine normale mit CSS formatierte Liste, die bei einigen Listenpunkten umgebrochen wird, da die Zeile zu lang ist:

• Listenpunkt 1
• Listenpunkt 2, der etwas
  länger ist
• Listenpunkt 3

Ich würde diesen Listenpunkt nun gerne so einrücken, dass er bündig mit dem Text der anderen Listenpunkte anfängt:

• Listenpunkt 1
• Listenpunkt 2, der etwas
    länger ist
• Listenpunkt 3

Ist das überhaupt möglich?

Grüße
Thomas

[suit]

Ist das überhaupt möglich?

list-style-position ist hier dein Freund.

Alternativ kannst du aber auch den Listenpunkt durch eine Hintergrundgrafik ersetzen und mit padding arbeiten.

[Thomas R.]

Alternativ kannst du aber auch den Listenpunkt durch eine Hintergrundgrafik ersetzen und mit padding arbeiten.

Da jeder Listenpunkt ein eigenes Bild hat, funktioniert diese Lösung leider nicht.

[suit]

Da jeder Listenpunkt ein eigenes Bild hat, funktioniert diese Lösung leider nicht.

Eine ID oder (Klasse, wenn es solche Listen mehrfach gibt) ist auch eine möglichkeit.

[Der Martin]

Hallo Thomas,

Ich habe eine normale mit CSS formatierte Liste, die bei einigen Listenpunkten umgebrochen wird, da die Zeile zu lang ist

das sollte normalerweise kein Problem sein.

• Listenpunkt 1
• Listenpunkt 2, der etwas
  länger ist

Wie hast du diese Darstellung erreicht?

Ich würde diesen Listenpunkt nun gerne so einrücken, dass er bündig mit dem Text der anderen Listenpunkte anfängt
Ist das überhaupt möglich?

Nicht nur möglich, es ist eigentlich sogar das Standardverhalten. Insofern wundert mich deine Frage etwas, bzw. wundere ich mich, wie du die nicht-eingerückte Darstellung hinbekommen hast.

So long,
 Martin

[suit]

Nicht nur möglich, es ist eigentlich sogar das Standardverhalten. Insofern wundert mich deine Frage etwas, bzw. wundere ich mich, wie du die nicht-eingerückte Darstellung hinbekommen hast.

Das kommt auf den Browser an :) manche haben outside und manche inside als Voreinstellung für list-style-position.

[Der Martin]

Hallo,

Nicht nur möglich, es ist eigentlich sogar das Standardverhalten. Insofern wundert mich deine Frage etwas, bzw. wundere ich mich, wie du die nicht-eingerückte Darstellung hinbekommen hast.
Das kommt auf den Browser an :) manche haben outside und manche inside als Voreinstellung für list-style-position.

das ist mir neu - ich wusste zwar, dass manche die Einrückung durch padding für ol/ul realisieren, andere durch margin für li. Aber welche haben list-style-position:inside als Default? IE6, IE8, Opera 8.54, Opera 11.01 und Firefox 3.0 scheinen alle outside zu verwenden. Das sind die, die ich gerade auf die Schnelle zur Hand hatte.

Ciao,
 Martin

[suit]

das ist mir neu - ich wusste zwar, dass manche die Einrückung durch padding für ol/ul realisieren, andere durch margin für li. Aber welche haben list-style-position:inside als Default? IE6, IE8, Opera 8.54, Opera 11.01 und Firefox 3.0 scheinen alle outside zu verwenden. Das sind die, die ich gerade auf die Schnelle zur Hand hatte.

Mir war so, als wäre da irgend ein IE dabei gewesen - kann mich aber auch täuschen.

[Thomas R.]

Nicht nur möglich, es ist eigentlich sogar das Standardverhalten. Insofern wundert mich deine Frage etwas, bzw. wundere ich mich, wie du die nicht-eingerückte Darstellung hinbekommen hast.

Du hast Recht, vielen Dank! Ich habe die Ursache gefunden:

Ich hatte in meiner Liste vor dem Text kleine Piktogramme. Der Text war nach dem Zeilenumbruch natürlich sehr wohl bündig, nur halt nicht mit dem Piktogramm. Mein Fehler, entschuldigung!

Ich habe nun eine Lösung gefunden:

Statt

<li><img src="/email.png" alt="E-Mail-Icon" class="icon" /><a href="">E-Mail-Benachrichtigung bei neuen Beiträgen</a></li>

schreibe ich

<li><img src="/images/gui/icons/email.png" alt="E-Mail-Icon" class="icon" /><a href="">E-Mail-Benachrichtigung bei neuen</a> <a href="" style="margin-left:20px;">Beiträgen</a></li>

Der Zeilenumbruch ist nach "neuen".

Das ist zwar nicht sauber, aber eine andere Lösung fällt mir nicht ein, da man nicht für jeden einzelnen Listenpunkt ein anderes Bullet-Icon verwenden kann.

[MudGuard]

Hi,

<li><img src="/email.png" alt="E-Mail-Icon" class="icon" /><a href="">E-Mail-Benachrichtigung bei neuen Beiträgen</a></li>

schreibe ich

<li><img src="/images/gui/icons/email.png" alt="E-Mail-Icon" class="icon" /><a href="">E-Mail-Benachrichtigung bei neuen</a> <a href="" style="margin-left:20px;">Beiträgen</a></li>

Der Zeilenumbruch ist nach "neuen".

Das ist zwar nicht sauber,

Allerdings. Hier wäre negativer text-indent ggf in Verbindung mit margin-left das richtige.

cu,
Andreas

[Thomas R.]

Allerdings. Hier wäre negativer text-indent ggf in Verbindung mit margin-left das richtige.

Das klingt genial, funktioniert aber leider nicht, da das voranstehende Bild ja auch Teil des "li" ist. :(

Ich habe dann versucht, den Text des "li" mit einem "span" zu versehen, aber das klappt leider auch nicht:

<li><img src="/images/gui/icons/email.png" alt="E-Mail-Icon" class="icon" /><a href=""><span style="text-indent:-70px;">E-Mail-Benachrichtigung bei neuen Beiträgen</a></span></li>

[MudGuard]

Hi,

Allerdings. Hier wäre negativer text-indent ggf in Verbindung mit margin-left das richtige.

Das klingt genial, funktioniert aber leider nicht, da das voranstehende Bild ja auch Teil des "li" ist. :(

HÄ?

Genau dadurch, daß das Bild Teil des li ist, funktioniert es.

Durch den negativen text-indent, der die erste Zeile nach links verlängert, steht das Bild weiter links als der gesamte Text, egal wieviele Zeilen er hat.

<li><img src="/images/gui/icons/email.png" alt="E-Mail-Icon" class="icon" /><a href=""><span style="text-indent:-70px;">E-Mail-Benachrichtigung bei neuen Beiträgen</a></span></li>

text-indent auf ein inline-Element hat natürlich keinerlei Auswirkung, da es nur für block-container gilt.

Warum informierst Du Dich eigentlich nicht selbst zu den gegebenen Stichworten, sondern probierst planlos rum?
Siehe auch Zitat 231

cu,
Andreas

[Thomas R.]

So, jetzt hat es hingehauen. Danke!

Folgendes funktioniert:

<li style="margin-left:20px; text-indent:-20px;"><img src="/images/gui/icons/email.png" alt="E-Mail-Icon" class="icon" /><a href="">E-Mail-Benachrichtigung bei neuen Beiträgen</a></li>

Allerdings hatte ich noch einen anderen Fehler, welcher die Einrückung verhindert hat: Die Liste befindet sich in einer Spalte und die Einrückung ging verloren, da ich der Spalte keinen Abstand von links gegeben hatte. Nachdem sie mit margin-left:460px; einen Abstand nach links bekommen hat, funktioniert nun alles wunderbar.

<div class="spalte1" style="float:left; width:460px;">
<ul><li>Liste 1</li></ul>
</div>
<div class="spalte2" style="margin-left:460px;">
<ul>
<li style="margin-left:20px; text-indent:-20px;"><img src="/images/gui/icons/email.png" alt="E-Mail-Icon" class="icon" /><a href="">E-Mail-Benachrichtigung bei neuen Beiträgen</a></li>
</ul>
</div>

[Der Martin]

Hallo Thomas,

<div class="spalte2" style="margin-left:460px;">
<ul>
<li style="margin-left:20px; text-indent:-20px;"><img src="/images/gui/icons/email.png" alt="E-Mail-Icon" class="icon" /><a href="">E-Mail-Benachrichtigung bei neuen Beiträgen</a></li>
</ul>
</div>

ist die Liste (das ul-Element) das einzige Kindelement des div-Containers? Wenn ja, ist das div-Element an der Stelle überflüssig, weil es nur ein Element "gruppiert". Dann könntest du die Formatierungen auch ebensogut auf das ul-Element anwenden.

Erst wenn das div außer dem ul noch weitere Kindelemente hat (die du hier vielleicht der Übersichtlichkeit halber weggelassen hast), ergibt das div einen Sinn.

So long,
 Martin

[Thomas R.]

Das ul-Element ist tatsächlich das einzige Kindelement des div-Containers. Ich werde den Container entfernen. Danke auch für diesen Hinweis.