CSS 我怎样才能给每个 <li> 自己的项目符号图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/209980/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I give each <li> its own bullet image?
提问by Dustman
I have tried
我试过了
<ul id="contact_list">
<li id="phone">Local 604-555-5555</li>
<li id="i18l_phone">Toll-Free 1-800-555-5555</li>
</ul>
with
和
#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);
}
to no avail. Only a disc appears. If I want each individual list item to have it's own bullet, how can I accomplish this with css, without using background images.
无济于事。只出现一张光盘。如果我希望每个单独的列表项都有自己的项目符号，我如何在不使用背景图像的情况下使用css 实现这一点。
Edit : I have discovered that, despite what firebug tells me, the list-style-image rule is being overridden somehow. If I inline the rule, like so:
编辑：我发现，尽管萤火虫告诉我什么，列表样式图像规则正在以某种方式被覆盖。如果我内联规则，如下所示：
<li id="phone" style="list-style-image: url(images/small_wood_phone.png);">Local 604-555-5555</li>
then all is well. Since I have no other rules in the test case I'm running that contains ul or li in the selector, I'm not sure why inlining gives a different result.
那么一切都很好。由于我在运行的测试用例中没有其他规则在选择器中包含 ul 或 li，我不确定为什么内联会给出不同的结果。
采纳答案by flamingLogos
First determine whether you are in "quirks" mode or not, because for many CSS properties it makes a difference.
首先确定您是否处于“怪癖”模式，因为对于许多 CSS 属性来说，这会有所不同。
Secondly, the W3c specifiesthat the URL should be in double quotes (although I don't use the quotes, either). Go with the spec to save yourself trouble down the line.
其次，W3c指定URL 应该用双引号括起来（尽管我也不使用引号）。遵循规范以节省自己的麻烦。
If you are specifying "strict" in your DOCTYPE, then the browser may require the double quotes, per the standard.
如果您在 DOCTYPE 中指定“严格”，则浏览器可能需要根据标准使用双引号。
回答by Anne Porosoff
Try this:
尝试这个：
#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');
}
回答by Russell Leggett
I'm not sure if this is your problem, but you're using relative links to your images. When you use relative links in css, it is relative to the css file, but if it is inlined, it will be relative to the html page.
我不确定这是否是您的问题，但您使用的是图像的相对链接。在css中使用相对链接时，是相对于css文件的，但是如果是内联的，就会是相对于html页面的。
回答by Vincent Ramdhanie
The thing is, I tried your code it it works. The only time it doesn't is if the images are not present. Maybe you need to check to see that the images you specify in the CSS are actually in the folder images or not misspelled.
问题是，我试过你的代码它可以工作。唯一不存在的情况是图像不存在。也许您需要检查一下您在 CSS 中指定的图像是否确实在文件夹图像中或没有拼写错误。
NOTE: IN both firefox and ie.
注意：在 Firefox 和 ie 中。
回答by Dustman
I never would have thought. If I quote the url, like so:
我从来没有想过。如果我引用网址，如下所示：
#contact_list #phone
{
list-style-image: url("/images/small_wood_phone.png");
}
it starts working. I unquote it, and it stops. I thought that's not supposed to make a difference.
它开始工作。我取消引用它，它就停止了。我认为这不应该有所作为。
Thanks for your help, everyone.
谢谢大家的帮助。
回答by Hugoware
You might double check that those images are where you think they are. This example works fine unless the images are missing.
您可能会仔细检查这些图像是否在您认为的位置。除非图像丢失，否则此示例工作正常。
回答by Remy Sharp
I would suggest doing it slightly differently, in the CSS - i.e.:
我建议在 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;
}
回答by Eric Wendelin
Could you try adding list-style-type: none; to #contact-list? Perhaps even instead of your list-style: declaration.
您可以尝试添加 list-style-type: none; 到#contact-list？也许甚至可以代替您的列表样式：声明。
回答by Eric Wendelin
It pains me to suggest it, but have you tried the !important flag? Also, does it behave the same in other browsers? What if this is something you have in your Firefox userChrome.css file?
建议它让我很痛苦，但是您是否尝试过 !important 标志？另外，它在其他浏览器中的行为是否相同？如果这是您的 Firefox userChrome.css 文件中的内容怎么办？
回答by James Anderson
You could try adding !important after the list-style-image property, which would prevent it from being overridden.
您可以尝试在 list-style-image 属性之后添加 !important，这将防止它被覆盖。
