CSS：列表样式图像的定位

Posted 2023-03-06

【中文标题】CSS：列表样式图像的定位

【英文标题】：CSS: Positioning of list-style-image

【发布时间】：2011-09-01 20:55:01

【问题描述】：

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

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

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

【问题讨论】：

请发布一些<!-- sample code -->，以便我们更好地提供帮助。

***.com/questions/1708833/… 的可能重复项

没有使用px 的list-style-* 属性。 reference.sitepoint.com/css/listproperties

看来我把它和背景混淆了：url。我真的认为 list-style-image 有一个类似的属性。现在我明白为什么我找不到任何关于它的东西了。谢谢@all

【参考方案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 供您使用。我调整了背景图片的位置，让它看起来更像一颗子弹。