css - 我怎样才能给每个
它自己的子弹图像？

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 来完成此操作，而不使用背景图像。

编辑：我发现，尽管萤火虫告诉我，list-style-image 规则正在以某种方式被覆盖。如果我内联规则，如下所示：

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

那么一切都很好。由于我在选择器中包含 ul 或 li 的测试用例中没有其他规则，因此我不确定为什么内联会给出不同的结果。

score 9 · Accepted Answer

试试这个：

#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');
}

score 7 · Accepted Answer

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

score 3 · Accepted Answer

问题是，我试过你的代码，它可以工作。唯一不存在的情况是图像不存在。也许您需要检查您在 CSS 中指定的图像是否实际上在文件夹 images 中或没有拼写错误。

注意：在 firefox 和 ie 中。

score 3 · Accepted Answer

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

其次，W3c规定URL 应该用双引号引起来（尽管我也不使用引号）。遵循规范可以为自己省去麻烦。

如果您在 DOCTYPE 中指定“严格”，则浏览器可能需要根据标准使用双引号。

score 2 · Accepted Answer

我建议在 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;
}

score 2 · Accepted Answer

您可能会仔细检查这些图像是否在您认为的位置。除非图像丢失，否则此示例工作正常。

score 2 · Accepted Answer

我从来没想过。如果我引用网址，如下所示：

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

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

谢谢大家的帮助。

score 1 · Accepted Answer

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

score 1 · Accepted Answer

建议它让我很痛苦，但是您是否尝试过 !important 标志？另外，它在其他浏览器中的行为是否相同？如果这是您的 Firefox userChrome.css 文件中的内容怎么办？

score 0 · Accepted Answer

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

score -1 · Accepted Answer

#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;
}

css - 我怎样才能给每个它自己的子弹图像？

11 回答 11

Related

Reference

css - 我怎样才能给每个
它自己的子弹图像？