css - 如何调整列表样式的背景图片 :outside - CSS

Question

list-style-position 时是否无法调整背景图像？是outside ？

示例:

li {list-style:decimal;background:url(images/bg-li.png) 0 0 no-repeat; }

如果我将背景位置更改为负值以便将其向左移动并位于十进制数的后面，即在外面，图像就会在左侧被截断。

当 list-style-position是inside或 none , 两者 padding和 background-position帮助，但是用 outside位置似乎没有任何作用。

问题是我有一个列表，其中每个列表项都很长，我希望编号在列表之外，这样文本的第二行就不会溢出编号。

有什么解决办法吗？

更新

我能够实现我需要的唯一方法是这样做(这几乎放弃了 outside 列表样式的样式):

ol li { list-style:none; list-style-position:inside;background:url(images/bg-li.png) 0px 0px no-repeat;padding:0; margin:0}
ol li strong{display:table-cell;font-weight:normal}
ol li span{display:table-cell; padding:14px 12px 5px 12px; font-size:0.875em}

我放弃了 list-style: decimal并且只使用了 <span> 中的数值+ <strong> 中每个列表项的正文, 将它们显示为 table cells - 这样 span 元素就有了背景图片，而 strong 元素显示为正确包装的对齐文本。

不能说我喜欢这种类型的编码，但我想这是最简单的方法？

Answer 1

您可以使用伪元素(例如:before)来实现这一点:

ol li {
    line-height: 24px;
    position: relative;
}

ol li:before {
    background: green;
    content: "";
    height: 20px;
    position: absolute; left: -24px; top: 1px;
    width: 20px;
    z-index: -1;
}

这是一个例子:http://jsfiddle.net/rwacarter/wofmsvth/