Wie listet man Listenelemente mit font-awesome icon next line text auf?

9

Ein Bild sagt mehr als tausend Worte. Der Text in der nächsten Zeile muss am gleichen Rand wie oben ausgerichtet sein.

HTML:

%Vor%

CSS:

%Vor%

Aktualisierung:

Nach dem Update von @panther:

Es ist akzeptabel, aber das Fontawesome-Icon ist jetzt nicht in der Mitte.

    
surfer190 08.12.2014, 14:38
quelle

4 Antworten

14

Sie können versuchen, die integrierte Lösung von font awesome für Listen zu verwenden :

  

Verwenden Sie fa-ul und fa-li zum einfachen Ersetzen von Standardaufzählungszeichen in ungeordneten Listen.

In Ihrem Fall ändert sich der Code in etwa so:

%Vor%     
Adrien Be 12.02.2016, 08:09
quelle
5

Sie suchen wahrscheinlich nach st. so.

%Vor%     
panther 08.12.2014 14:46
quelle
2

Ich denke, Sie erwarten so

Geige

Ссылка

Ich habe ein Beispiel auf jsfiddle hinzugefügt, ich arbeite ein bisschen herum. es könnte dir helfen.

CSS

%Vor%

HTML

%Vor%     
Manjunath Siddappa 08.12.2014 14:54
quelle
2

Warum nicht:

  1. Wenden Sie position mit einem property value von relative auf li an, um Überlappungen zu vermeiden

  2. Fügen Sie das Quadrat mit :before selector ein und fügen Sie position mit einem property value von Absolute o seinem Block CSS hinzu.

So können Sie es nach Bedarf positionieren. Sie haben die Eigenschaften top , bottom , left und right , mit denen Sie arbeiten können, wenn Sie sie positionieren.

HTML

%Vor%

CSS

%Vor%

Siehe Arbeitsbeispiel hier

    
Sleek Geek 08.12.2014 15:10
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Android 5 und OnClick im XML-Layout