CSS: позиционирование list-style-image

Question

У меня есть список с list-style-image:url("../images/prices/tick.png");

Как правильно расположить изображение, чтобы изображение и текст находились в одной и той же y координате? Не было ли способа определить это сразу после url с url("link") 20px 30px?

Кажется, я не могу найти в Интернете информацию о том, как это было сделано снова.

Answer 1

Я думаю, вы думаете об использовании background-image вместо list-style-image ..

поэтому установите list-style на none и поместите background-image на li - тогда да, вы сможете расположить его немного точнее, используя часть background-position этого:

background: url("link") no-repeat 20px 30px;

Answer 2

Вы можете попробовать что-то вроде этого:

ul {
    list-style:none;
}
li {
    background:url(image.gif) no-repeat 0 0;
    padding-left:16px;
}

Таким образом, можно задать положение фона и значение отступа.

Answer 3

Согласно Документам разработчика Mozilla в стиле списка, вы не можете позиционировать маркер списка с помощью CSS.Наиболее близким является list-style-position, который позволяет вам позиционировать маркер только внутри или снаружи элементов списка.

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

Answer 4

Создано jsFiddle для работы с вами. Я настроил фоновое изображение position , чтобы оно выглядело больше как пуля.