CSS：列表样式图像的定位

Question

我有list-style-image:url("../images/prices/tick.png");

的列表

如何正确定位图像以使图像和文本位于相同的y坐标上？有没有办法在url url("link") 20px 30px之后立即定义它？

我似乎无法在线查找有关如何重新制作的信息。

Answer 1

我认为您正在考虑使用background-image而不是list-style-image ..

所以将list-style设置为无，并在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

为您创建jsFiddle。我调整了背景图像位置，因此看起来更像是子弹。

Answer 4

根据列表样式的Mozilla's Developer Docs，您无法使用CSS定位列表标记。最接近的是list-style-position，它只允许您将标记放在列表元素的内部或外部。

如果您想要定位图像，则必须自己编辑图像，或者将图像用作背景。