3

我有这样的CSS：

.done {list-style-image:url('images/tick.gif')}
.notdone {list-style-image:url('images/cross.gif')}

像这样的html：

<ul>
    <li class="done">Done</li>
    <li class="notdone">Not Done</li>
</ul>

在 IE6 和 FF 上运行良好。每个 li 项目都有不同的子弹图像。但是我在 list-style-image 上看到的所有文档都说它应该应用于 ul 标签。

是否有适当的或基于标准的方式来做我想做的事情，或者是这样吗？

编辑：http ://www.w3.org/TR/CSS21/generate.html

看起来它并没有说我不能在 li 标签上使用 list-style-image ，但是示例并没有显示出来。

4

6 回答 6

6

我相信您所指的文档是当您希望项目符号遵循某种格式时，这就是该类应​​用于父标签的原因 

<ul>

在那些情况下。由于您有两个图像，每个图像都有自己的项目符号，因此我认为您正在做的事情没有任何问题

于 2009-04-09T17:03:17.420 回答
5

CSS 2.1 标准给出了list-style直接应用于li.

尽管作者可以直接在列表项元素上指定“列表样式”信息（例如，HTML 中的“li”），但他们应该谨慎行事。

其次是：

ol.alpha li   { list-style: lower-alpha } /* Any "li" descendant of an "ol" */ 
ol.alpha > li { list-style: lower-alpha } /* Any "li" child of an "ol" */

所以我会得出结论，只要你小心并理解你的 CSS 规则的级联，直接应用list-style-type或列出项目是可以的。list-style-image

于 2009-04-09T17:35:27.997 回答
2

跟进您的编辑...

如果您查看 CSS 的默认样式表，您会看到 li 的定义如下：

li              { display: list-item }

在您提供的链接中，list-style-image 在任何带有 display: list-item 的元素上都有效。因此，根据标准，您所做的事情是有效的。

于 2009-04-09T17:16:32.193 回答
1

当涉及到从浏览器到浏览器的列表图像的间距时，我遇到了不一致的情况。结果，我通常会跳过整个问题，而是做这样的事情：

li {list-style: none; padding-left: 15px;}    
li.done {background: url(images/tick.gif) no-repeat left top;}
li.notdone {background: url(images/cross.gif) no-repeat left top;}

最终结果是使用与您最初想要的相同图像的项目符号，但您可以更好地控制实际位置和间距。可能需要调整，但这是一般的想法。

于 2009-04-10T19:13:40.453 回答
0

我不认为你在做什么有问题。你在说什么文档？

于 2009-04-09T17:00:42.013 回答
0

理论上，列表中的所有条目都具有相同的项目符号样式。这些列表在历史上可以在诸如大纲之类的东西中找到，在任何级别您都有 1、2、3 或 A、B、C 并且将不同的序数类型相互混合是没有意义的。我不认为从风格上做你正在做的事情有什么问题。但我不知道它是否是正确的CSS。

于 2009-04-09T17:07:37.580 回答