CSS Lücke zwischen Text und List-Style-Bild entfernen [Duplizieren]

8

Für meine ul Listenelemente habe ich ein Bild mit list-style-image -Eigenschaft hinzugefügt.

Beispiel, was ich habe: JSFiddle

%Vor% %Vor%

Ich möchte, dass mein Text ( z. B. "Kaffee") innerhalb der Elemente li die Bilder berührt - habe keine Lücke zwischen dem Bild der Liste und seiner Beschreibung.

    
Helen3061371 28.09.2016, 12:37
quelle

6 Antworten

2

Sie können den Inhalt jedes <li> in ein <span> umbrechen und dann den Bereich entsprechend positionieren:

%Vor%

Und dann:

%Vor%

Ссылка

    
Edmund Reed 28.09.2016, 13:10
quelle
6

Eine Lösung besteht darin, den Listenstil zu entfernen und das Bild vor dem Element li über die Pseudoklasse :before

hinzuzufügen

%Vor% %Vor%
    
Andy Tschiersch 28.09.2016 12:51
quelle
3

Es scheint, dass Sie den Abstand zwischen dem list-style-image (oder bullet) und dem li-Inhalt nicht direkt steuern können.

Um es zu ermöglichen, können Sie das Bild als Hintergrund verwenden

%Vor%

Ссылка

Sie können sich auch diese Antwort hier ansehen

>     
Alekos Dordas 28.09.2016 12:48
quelle
2

Sie müssen einen CSS-Trick machen, um das zu bekommen.

Verwenden Sie

%Vor%

statt

%Vor%

Eigenschaft dafür siehe fiddle link

    
danish farhaj 28.09.2016 12:51
quelle
1

Ich glaube nicht, dass Sie das mit List-style-image machen können. Sie müssen stattdessen einen falschen Listenstil erstellen. Etwas wie das:

%Vor%

Demo hier: Ссылка

    
Quy Truong 28.09.2016 12:49
quelle
1

Obwohl Sie eine Antwort akzeptiert haben, finde ich, dass sie viel komplizierter ist, als es sein muss.

Angenommen, Sie interessieren sich nicht für IE8 oder niedriger, dann schlage ich vor:

%Vor% %Vor%
    
MonkeyZeus 28.09.2016 14:26
quelle

Tags und Links