li bullet links ausrichten, text rechts ausrichten möglich?
![](/uploads/default_avatar/thumb/missing.png)
- css
0 1UnitedPower0 michat
0 Der Martin
0 ichbinich0 Der Martin
0 michat
0 Der Martin
0 michat
1 Matthias Apsel
0 michat
0 michat
1 1UnitedPower0 michat
Hi
eigentlich sagt der Betreff schon fast alles, ergänzen möchte ich dass es um xhtml 4x geht.
Also kann man in einer ul li Liste die Bullets links ausrichten und die zugehörigen unterschiedlich breiten Listentexte rechts ausrichten?
bye
MH
Also kann man in einer ul li Liste die Bullets links ausrichten und die zugehörigen unterschiedlich breiten Listentexte rechts ausrichten?
Einfach das Listen-Element oder die Einträge mit "text-align: right;" versehen funktioniert für Chrome. Firefox zickt da aber rum. Mir fällt auf die schnelle keine Möglichkeit ohne zusätzliches Markup ein.
Hi
Also kann man in einer ul li Liste die Bullets links ausrichten und die zugehörigen unterschiedlich breiten Listentexte rechts ausrichten?
Einfach das Listen-Element oder die Einträge mit "text-align: right;"
@ beide
Nee. Soweit wußte ich das schon selbst. Das zieht aber die Bullets mit. Die sollen aber wie angegeben links ausgerichtet bleiben.
Und ja, das kann komisch aussehen und ob ich das dann mag weiß ich noch garnicht so genau. Jetzt will ich erstmal sehen: Bullet links ausgerichtet, Texteintrag rechts ausgerichtet.
Gruß
Michael
Hallo,
eigentlich sagt der Betreff schon fast alles, ergänzen möchte ich dass es um xhtml 4x geht.
scheint ein Tippfehler zu sein, es gibt kein XHTML 4. Du meinst wahrscheinlich entweder HTML 4.01 oder XHTML 1.0. Spielt aber für die Frage bzw. die Antwort auch keine Rolle.
Also kann man in einer ul li Liste die Bullets links ausrichten und die zugehörigen unterschiedlich breiten Listentexte rechts ausrichten?
Was läge näher als text-align:right für das li-Element bzw. die li-Elemente? Wobei ich finde, dass das merkwürdig aussieht.
Ciao,
Martin
Hallo,
Also kann man in einer ul li Liste die Bullets links ausrichten und die zugehörigen unterschiedlich breiten Listentexte rechts ausrichten?
Was läge näher als text-align:right für das li-Element bzw. die li-Elemente? Wobei ich finde, dass das merkwürdig aussieht.
Nicht ganz, dann ist auch das Bullet rechts vor den Text verschoben.
Zusätzlich list-style-type:none
für ul/ol
und das Bullet als Hintergrund für li
definieren.
vg ichbinich
Hi,
Was läge näher als text-align:right für das li-Element bzw. die li-Elemente? Wobei ich finde, dass das merkwürdig aussieht.
Nicht ganz, dann ist auch das Bullet rechts vor den Text verschoben.
das scheint browserabhängig zu sein. Ich habe auf die Schnelle nur mit Opera 12.12 getestet, da sind die Bullets sauber untereinander trotz unterschiedlicher Textausrichtung. Und das meinte ich mit "sieht merkwürdig aus": Der Abstand zwischen Bullet und dem Beginn des Texts ist unterschiedlich.
Zusätzlich
list-style-type:none
fürul/ol
und das Bullet als Hintergrund fürli
definieren.
Okay. Das ist dann eine aufwendigere, aber vermutlich browserunabhängige Lösung.
Ciao,
Martin
Hi
das scheint browserabhängig zu sein. Ich habe auf die Schnelle nur mit Opera 12.12 getestet, da sind die Bullets sauber untereinander trotz unterschiedlicher Textausrichtung.
Das verstehe ich jetzt überhaupt nicht. Opera 12.12 (Debian/Linux) ist auch mein (Standard-) Browser. Und hier werden die Bullets mitgezogen, benso im FF/IW. Aber was heißt unterschiedlicher Textausrichtung. Hast du für den Bullet explizit eine eigene angegeben, sowas wie li:before { content: '•'; font-family: monospace; padding-right: 0.5em; text-align: left; }, was bei mir im Zusammenhang mit dem rechts ausgerichteten Listeneintrag nicht funktioniert?
bye
MH
Hallo,
Ich habe auf die Schnelle nur mit Opera 12.12 getestet, da sind die Bullets sauber untereinander trotz unterschiedlicher Textausrichtung.
Das verstehe ich jetzt überhaupt nicht. Opera 12.12 (Debian/Linux) ist auch mein (Standard-) Browser. Und hier werden die Bullets mitgezogen
sehr seltsam - hier Opera 12.12 unter Linux Mint.
Hast du für den Bullet explizit eine eigene angegeben, sowas wie li:before { content: '•'; font-family: monospace; padding-right: 0.5em; text-align: left; }, was bei mir im Zusammenhang mit dem rechts ausgerichteten Listeneintrag nicht funktioniert?
Nein, eigentlich nicht. Das war mein minimierter Test Case, auf die Schnelle sogar mit "schmutzigem" inline-Style:
<ul>
<li>Punkt 1</li>
<li style="text-align:right;">Punkt 2</li>
<li>Punkt 3</li>
</ul>
Das Ergebnis waren drei sauber untereinander stehende Bullets am linken Rand, der erste und der dritte Eintrag bündig dazu ausgerichtet, und der zweite dazwischen klebte am rechten Bildrand, weit weg von seinem Bullet.
So long,
Martin
Hi
Hallo,
Ich habe auf die Schnelle nur mit Opera 12.12 getestet, da sind die Bullets sauber untereinander trotz unterschiedlicher Textausrichtung.
Das verstehe ich jetzt überhaupt nicht. Opera 12.12 (Debian/Linux) ist auch mein (Standard-) Browser. Und hier werden die Bullets mitgezogensehr seltsam - hier Opera 12.12 unter Linux Mint.
Ok, ich beginne meine eigenen Stolperfallen zu durchblicken. Es kann bei mir *so* nicht funktionieren, weil ich nicht den vorgegebenen Bullet verwende (der in jedem Browser unterschiedlich in Größe und Lage dargestellt wird, und ausgerechnet in Opera deplaziert aussieht). Ich verwende deshalb ein Textsymbol: li:before { content: '•'; }
weshalb ich einen Teil des Textes links, den anderen rechts ausrichten müsste. Und das geht vermutlich überhaupt nicht. Und wohl auch nicht im HG?
So long,
Martin
bye
MH
Om nah hoo pez nyeetz, michat!
weshalb ich einen Teil des Textes links, den anderen rechts ausrichten müsste. Und das geht vermutlich überhaupt nicht. Und wohl auch nicht im HG?
Doch. Beispielsweise mit absoluter Postionierung des before-Pseudoelements.
Matthias
Hi
Doch. Beispielsweise mit absoluter Postionierung des before-Pseudoelements.
Danke. Das tut exakt das was ich suchte. Und so simpel dass man eigentlich selber draufkommen sollte. Eigentlich.
Ob mir das Ergebniss visuell dann tatsächlich gefällt werde ich wohl erst mit etwas Herumprobieren und zeitlichem Abstand verstehen.
bye
MH
Hi
Nicht ganz, dann ist auch das Bullet rechts vor den Text verschoben.
Zusätzlichlist-style-type:none
fürul/ol
und das Bullet als Hintergrund fürli
definieren.
Danke. Das schaue ich mir mal genauer an.
Gruß
MH
Zusätzlich
list-style-type:none
fürul/ol
und das Bullet als Hintergrund fürli
definieren.
Oder mit dem after-Pseudoelement.
Beispiel, funktioniert zumindest im Firefox.
Hi
Oder mit dem after-Pseudoelement.
Beispiel, funktioniert zumindest im Firefox.
Sehr interessante Lösung. Wobei mir das gleich als zweifach von hinten durch die Brust ins Auge vorkommt.
Auch die Seite auf die du verlinkst finde ich recht praktisch.
Danke.
bye
MH
Sehr interessante Lösung. Wobei mir das gleich als zweifach von hinten durch die Brust ins Auge vorkommt.
Stimmt, da hat mich ein Denkfehler geritten.