Zeilenumbruch in <li> mit fontawesome

mimii · #1 (**permalink**) 18.01.2017, 11:12

Hallo ins Forum,

ich habe eine einfache Liste, die ich mit der Bootstrapklasse "list-unstyled" formatiere. Vor dem <li> binde ich mit fontawesome ein Icon ein. Soweit klappt das. Wenn im Listelement jedoch längerer Text steht bricht die Zeile um und der Text steht nicht mehr bündig mit dem Textanfang der oberern Zeile, sondern unter dem Icon. Ich habe schon mit text-indent, padding und margin probiert, bin aber zu keinem wirklich brauchbaren Ergebnis gekommen.

Hier mal das Grundgerüst im Fiddle.

Danke für n Tipp und Gruß

MrMurphy · #2 (**permalink**) 18.01.2017, 11:58

Hallo

Zur Lösung bietet sich Flexbox an. Also für die li-Elemente

Code:

display: flex;
align-items: baseline;

Gruss

MrMurphy

mimii · #3 (**permalink**) 18.01.2017, 13:15

OK, mach ich.

Danke für die Hilfe

Gruß
mimii

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Zeilenumbruch in CSS unterbinden	stuff01	CSS	7	04.04.2012 23:51
Zeilenumbruch nach <li> Nummerierung verhindern	Earl of Green	CSS	4	16.05.2010 09:16
Zeilenumbruch durch Codestruktur	MANIK	(X)HTML	11	23.09.2007 15:37
Zeilenumbruch bei <li> verhindern	MxAgent	CSS	9	22.11.2006 15:14
Problem mit Horizontaler Liste bei Zeilenumbruch	captain	CSS	5	26.11.2004 11:05