CSS Abstand zwischen dem Text und Liste-Stil-Bild entfernen

Question

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

Beispiel, was ich habe: JSFiddle

ul { 
 
    list-style-image: url('http://placehold.it/50x40'); 
 
}

<ul> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
    <li>Coca Cola</li> 
 
</ul>

ich meinen Text möchte (zB "Coffee") innerhalb der li Elemente, die Bilder berühren - keine Lücke zwischen dem Bild der Liste und seiner Beschreibung.

Answer 1

Sie den Inhalt jedes <li> in einer <span> und dann Position wickeln können, die entsprechend spannen:

<li><span>Coffee</span></li> 

Und dann:

li span { 
    position: relative; 
    left: -7px; 
} 

https://jsfiddle.net/ndpr9tnr/

Answer 2

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

Um es passieren Sie das Bild als Hintergrund verwenden

li { 
    list-style-type: none; 
    background-image: url('http://placehold.it/50x40'); 
    background-repeat: no-repeat; 
    background-size: 15px 15px; 
    padding-left: 15px; 
} 

https://jsfiddle.net/gd2rtb70/

Sie können auch bei this answer here

Answer 3

aussehen Ich glaube nicht, dass Sie mit der Liste zu tun -Style-Bild. Sie müssen stattdessen einen falschen Listenstil erstellen. Etwas wie folgt aus:

ul { 
    list-style:none; 
} 

li:before { 
    content:""; 
    background: url('http://placehold.it/50x40'); 
    width: 50px; 
    display: inline-block; 
    height: 40px; 
} 

Demo hier:

Answer 4

Eine Lösung ist die Liste Stil zu entfernen, und fügen Sie das Bild vor dem li Element über Pseudo-Klasse :before

ul { 
 
    list-style: none; 
 
} 
 

 
ul li:before { 
 
    content: url(http://placehold.it/50x40); 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<ul> 
 
    <li>Coffee</li> 
 
    <li>Tee</li> 
 
    <li>Cola</li> 
 
</ul>

Answer 5

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

Verwenden

background: url(); 

statt

list-style-image 

Eigenschaft für dieses sehen Geige link

Answer 6

Auch wenn Sie eine Antwort akzeptiert haben, glaube ich, dass es viel komplizierter ist, als es sein muss.

Sie kümmern sich nicht um IE8 Unter der Annahme oder senken dann schlage ich vor:

ul { 
 
    list-style-image: url('http://placehold.it/50x40'); 
 
} 
 
li { 
 
    text-indent: -7px; /* also works when solely applied to the <ul> */ 
 
}

<ul> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
    <li>Coca Cola</li> 
 
</ul>