CSS Liste: Text einrücken nach Zeilenumbruch
#1
geschrieben 24. Januar 2019 - 11:02
ich versuche verzweifelt den Text nach einem Zeilenumbruch in ul / li einzurücken.
Probiert habe ich alles mögliche, allem voran natürlich list-style-position:outside;
Ich habe es in das wrap, in die box, in die ul und li elemente gesetzt, aber es tut sich einfach nix.
Sieht so aus:
Einen Link kann ich gerade nicht geben, da noch im Aufbau.
Weiß jemand wieso das so dargestellt wird? Ist geräte- und browserübergreifend.
Anzeige
#2
geschrieben 24. Januar 2019 - 11:27
Grob:
<ul> <li><div>DEIN TEXT MIT VIEL ZEICHENUMBRUCH UND SO</div></li> <li><div>UND NOCHMEHRVON TEXTZEUCHS</div></li> </ul>
wenn du magst kannst du sogar nun in der CSS die DIV für innerhalb der Liste extra klassifizieren....
SOLLTE! eigentlich funktionieren.
EDIT:
Flüchtigkeitsfehler im Beispiel-Code korrigiert
Dieser Beitrag wurde von Stefan_der_held bearbeitet: 24. Januar 2019 - 11:41
#3
geschrieben 24. Januar 2019 - 11:39
Testquelltext
<html> <head> <title>LISTENTEST</title> </head> <body> <ul> <li><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div></li> <li><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div></li> <li><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div></li> <li><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div></li> <li><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div></li> <li><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div></li> </ul> </body> </html>
Testweise noch die Std. Aufzählungszeichen gegen eine Grafik (nur das erste) ersetzt. Funktioniert ebenso
Dieser Beitrag wurde von Stefan_der_held bearbeitet: 24. Januar 2019 - 12:18
#4
geschrieben 24. Januar 2019 - 12:15
Es wird dann einfach unter das li Element gesetzt:
Weitere styles liegen nicht drauf.
#5
geschrieben 24. Januar 2019 - 12:17
wie sieht der entsprechende Code aus? Part im CSS für Listen und der Codeschnippsel der das Bild erzeugt.
#6
geschrieben 24. Januar 2019 - 12:21
.repairs-red { padding:10px 0px 0px 0px; margin: 0px 0px 15px 0px; line-height:2em; list-style-position:outside; }
für li
.repairs-red li:before { font-family:"Font Awesome 5 Free"; font-weight: 900; content:"\f00d"; margin-right:10px; color:red; list-style-type:none; }
#7
geschrieben 24. Januar 2019 - 12:27
Zudem würde ich aus "li" folgende Bereiche wenigstens testweise mal rausnehmen:
margin.right list-style-type
Grafiken (also Aufzählungszeichen ändern) in Listen kannst du ja im Grunde ganz einfach:
li {list-style-image:url(./PFAD/ZUM/BILD/bild.jpg);}
Habe den Verdacht, dass dein CSS-Part für "li" hier einiges durcheinander bringt
Sollte das "rausnehmen" der CSS Infos wie oben geschrieben deine Seite komplett verunstalten, so lager den LI-CSS Part in einen eigenen aus sodass er von dem anderen container getrennt deklariert wird.
Dieser Beitrag wurde von Stefan_der_held bearbeitet: 24. Januar 2019 - 12:29
#8 _Osmodia_
geschrieben 24. Januar 2019 - 12:49
Du hast einen Denkfehler. Die beiden Zeilen stehen untereinander. Das rote X ist ein ganz normales Zeichen und fängt da an, wo die andere Zeile auch beginnt. Einrücken kannst du das so nicht.
Nimm das rote X für den Listenpunkt als Grafik, dann stimmt auch die Darstellung.
#9
geschrieben 24. Januar 2019 - 13:16
Dann sollte bspw. in meinem Beispiel es auch funktionieren wenn das listen-interne-DIV ein "float:right" oder "float:left" bekommt - je nach erfordernis
#10
geschrieben 24. Januar 2019 - 13:25
Vollständigkeithalber hier der HTML Code:
<ul class="repairs-red"> <li>Versandkosten für den Rückversand in das Ausland. Die Versandkosten variieren je nach Zielland und beginnen bei 10€. </li> </ul>
Das Icon ist in der Tat ein Schriftzeichen aus Font Awesome. Daher über das Pseudoelement :before und die Anweisung content: eingebunden. Mit Bildern gibt es nur Probleme und man muss ellenlange Gerüste aus Blöcken bauen, damit alles vertikal mittig bleibt, auch wenn die Schriftart/Größe ändert wird.
@Osmodia: verstehe ich nicht ganz. Aufzählungszeichen und Text sind in einer Zeile. Erst mit dem div Element rutscht alles runter in eine neue Zeile.
Ich habe es jetzt so gelöst und auch auf mobile sieht es solide aus:
oder ist das kein eleganter Weg?
Edit: das Gute ist, dass Text, der nur über 1 Zeile geht auch genauso bündig ist wie die lange variante, da das padding nur auf alles ab der 2. Zeile anschlägt :-)
Dieser Beitrag wurde von Andrew0 bearbeitet: 24. Januar 2019 - 13:27
#11
geschrieben 24. Januar 2019 - 13:37
Zitat (Andrew0: 24. Januar 2019 - 13:25)
Weil <li> als eigener Container gilt und durch das Zeichen darin der Browser "denkt"
"Ah.... neue Klasse... irgendwo ein Float gesetzt? nein? dann kommt das unter dem"
So kann ich mir das zumindest erklären.
Die "DIV"-Lösung sollte demnach auch funktionieren wenn du dort ein entsprechendes Styleelement mitgibtst - je nach Bedarf
float:right
oder
float:left
#12
geschrieben 24. Januar 2019 - 16:00
ul {list-style-type:none;} li {display:table;} li::before {display:table-cell; font-family:"Font Awesome 5 Free"; font-weight: 900; content:"\f00d"; color:red;} }
(Hab mal alle paddings und margins rausgenommen, dass man das auch sieht, dass es ohne jegliche Ränder funktioniert)
Übrigens muß der Font eingebunden sein, sonst funktioniert das Ganze nur auf Rechnern, wo die Schriftart auch installiert ist.
#13
geschrieben 24. Januar 2019 - 16:12
li -> display:table
li:before -> display:table-cell
Text hinter li in div oder span packen und ebenfalls als display:table-cell definieren.
Dann braucht man nur noch ein padding auf li:before (z.B. padding-right: 20px;) und bekommt das: