CSS удалить пробел между текстом и списком-образ-образ

Question

Для моих ul элементов списка Я добавил изображение, используя list-style-image.

пример того, что у меня есть: JSFiddle

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

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

Я хочу, чтобы мой текст (например "Кофе") в пределах li пунктов коснуться картинки - нет разрыва между изображением элемента списка и его описанием.

Answer 1

Вы можете обернуть содержимое каждого <li> в <span>, а затем позиции, которые охватывают соответственно:

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

И потом:

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

https://jsfiddle.net/ndpr9tnr/

Answer 2

Похоже, что вы не можете напрямую управлять пространством между списком-стилем (или маркой) и содержимым ли.

Для того, чтобы сделать это произойдет, вы можете использовать изображение в качестве фона

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/

Вы также можете посмотреть на this answer here

Answer 3

я не думаю, что вы можете сделать это с помощью списка -стиль-изображения. Вместо этого вам нужно создать стиль поддельного списка. Что-то вроде этого:

ul { 
    list-style:none; 
} 

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

Демо здесь:

Answer 4

Одним из решений является удаление стиля списка и добавить изображение до li элемента с помощью класса псевдо :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

Вы должны сделать трюк CSS, чтобы получить это.

Использование

background: url(); 

вместо

list-style-image 

свойства для этого см скрипку link

Answer 6

Несмотря на то, что вы приняли ответ, я чувствую, что это гораздо сложнее, чем это должно быть.

Предполагая, что вы не заботитесь о IE8 или ниже, чем я предлагаю:

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>