Question

我试过了

<ul id="contact_list">
    <li id="phone">Local 604-555-5555</li>
    <li id="i18l_phone">Toll-Free 1-800-555-5555</li>
</ul>

与

#contact_list
{
    list-style: disc none inside;
}

#contact_list #phone
{
    list-style-image: url(images/small_wood_phone.png);
}

#contact_list #i18l_phone
{
    list-style-image: url(images/i18l_wood_phone.png);
}

无济于事。仅出现光盘。如果我希望每个单独的列表项都有自己的项目符号，我如何使用css， 而不使用背景图像 来实现此目的。

编辑：我发现，尽管firebug告诉我，列表样式图像规则正在以某种方式被覆盖。如果我内联规则，就像这样：

    <li id="phone" style="list-style-image: url(images/small_wood_phone.png);">Local 604-555-5555</li>

然后一切都很顺利。由于我在测试用例中没有其他规则，我在选择器中运行包含ul或li，我不确定为什么内联会产生不同的结果。

Answer 1

试试这个：

#contact_list li
{
    list-style: none;
}

#contact_list li#phone
{
    list-style-image: url('images/small_wood_phone.png');
}

#contact_list li#i18l_phone
{
    list-style-image: url('images/i18l_wood_phone.png');
}

Answer 2

我不确定这是不是您的问题，但您使用的是图片的相对链接。当你在css中使用相对链接时，它是相对于css文件的，但是如果它是内联的，它将相对于html页面。

Answer 3

问题是，我尝试了你的代码它有效。它没有唯一的时间是图像不存在。也许您需要检查一下您在CSS中指定的图像是否实际位于文件夹图像中还是没有拼写错误。

注意：在firefox和ie。

中

Answer 4

首先确定你是否处于“怪癖”模式，因为对于许多CSS属性来说它会有所不同。

其次，W3c specifies表示URL应该是双引号（尽管我也不使用引号）。按照规范来节省自己的麻烦。

如果您在DOCTYPE中指定“strict”，则浏览器可能需要双引号，符合标准。

Answer 5

我建议在CSS中稍微改变一下 - 即：

#contact_list
{
  list-style: none;
}

#contact_list li {
  padding-left: 20px; /* assumes the icons are 16px */
}

#contact_list #phone
{
  background: url(images/small_wood_phone.png) no-repeat top left;
}

#contact_list #i18l_phone
{
  background: url(images/i18l_wood_phone.png) no-repeat top left;
}

Answer 6

您可以仔细检查这些图像是否符合您的想法。除非图像丢失，否则此示例工作正常。

Answer 7

我从未想过。如果我引用网址，就像这样：

#contact_list #phone
{
    list-style-image: url("/images/small_wood_phone.png");
}

它开始工作。我取消引用它，它停止了。我认为这不应该有所作为。

感谢大家的帮助。

Answer 8

你能尝试添加list-style-type：none;到#contact-list？甚至可能代替你的list-style：声明。

Answer 9

我很难建议，但你有没有试过！重要的旗帜？此外，它在其他浏览器中的行为是否相同？如果这是你的Firefox userChrome.css文件中的内容怎么办？

Answer 10

你可以尝试在list-style-image属性之后添加！important，这样可以防止它被覆盖。

Answer 11

#contact_list
{
    list-style: disc none inside;
}

#contact_list #phone
{
    background-image: url(images/small_wood_phone.png) no-repeat top left;
    padding-left: <image width>px;
}

#contact_list #i18l_phone
{
    background-image: url(images/i18l_wood_phone.png) no-repeat top left;
    padding-left: <image width>px;
}

我怎样才能给每个<li>自己的子弹图像？</li>

11 个答案: