CSS: позиционирование изображения в стиле списка

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

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

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


image css position
person Frank Vilea    schedule 25.05.2011    source источник
comment
Пожалуйста, опубликуйте несколько <!-- sample code -->, чтобы мы могли лучше помочь.   -  person pixelbobby    schedule 25.05.2011
comment
возможный дубликат stackoverflow.com/questions/1708833/   -  person Dave Kiss    schedule 25.05.2011
comment
Нет list-style-* свойств, использующих px. reference.sitepoint.com/css/listproperties   -  person drudge    schedule 25.05.2011
comment
Вроде перепутал с фоном: url. Я действительно думал, что есть подобное свойство для list-style-image .. Теперь я понимаю, почему я ничего не нашел об этом .. Спасибо @ all   -  person Frank Vilea    schedule 25.05.2011

Ответы (4)


arrow_upward
11
arrow_downward

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

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

background: url("link") no-repeat 20px 30px;
person clairesuzy    schedule 25.05.2011

arrow_upward
4
arrow_downward

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

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

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

person silex    schedule 25.05.2011
comment
Ударь меня до удара! Я писал именно этот метод. - person breezy; 25.05.2011

arrow_upward
0
arrow_downward

Согласно документации разработчика Mozilla в стиле списка, вы не можете разместить маркер списка с помощью CSS. . Ближайшим является позиция в стиле списка, которая позволяет размещать маркер только внутри или вне элементов списка.

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

person thedaian    schedule 25.05.2011

arrow_upward
0
arrow_downward

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

person pixelbobby    schedule 25.05.2011