CSS：列表样式图像的定位答案

【问题标题】：CSS: Positioning of list-style-imageCSS：列表样式图像的定位
【发布时间】：2011-09-01 20:55:01
【问题描述】：

我有一个list-style-image:url("../images/prices/tick.png");的列表

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

我似乎无法在网上找到有关如何再次完成此操作的信息。

【问题讨论】：

【解决方案1】：

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

所以将list-style 设置为none，并在li 上添加background-image - 然后是的，您可以使用background-position 部分更准确地定位它：

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

【讨论】：

【解决方案2】：

你可以试试这样的：

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

因此可以配置背景位置和填充值。

【讨论】：

【解决方案3】：

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

如果要定位图像，则必须编辑图像本身，或者将图像用作背景。

【讨论】：

【解决方案4】：

创建了一个jsFiddle 供您使用。我调整了背景图片的位置，让它看起来更像一颗子弹。

【讨论】：