Html 每个 li 的不同列表样式图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4474536/
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
Different list style image for each li
提问by matteodv
I've got a problem with some ul and li...
I'd like to create an unordered list with 3 li and each li has got a different list-style-image...
I wrote this code but the image don't appear...
我有一些 ul 和 li 的问题......
我想用 3 li 创建一个无序列表，每个 li 都有一个不同的列表样式图像......
我写了这段代码，但图像没有'出现...
Can you help me? Thanks!
你能帮助我吗？谢谢！
EDIT: Post updated with HTML code ;)
编辑：使用 HTML 代码更新后的帖子；)
<div id="right_main">
<ul id="mainFeatures">
<li id="wishlist">Some text here...</li>
<li id="sharing">Some text here...</li>
<li id="linking">Some text here...</li>
</ul>
</div>
#right_main ul#mainFeatures {
height:250px;
width:350px;
overflow:hidden;
margin-left:25px;
}
#mainFeatures li {
font-weight:bold;
font-size:22px;
font-family:"Myriad Pro", sans-serif;
padding:5px;
}
#mainFeatures li#wishlist {
list-style-image:url(images/wishListImage.png);
list-style-position:outside;
}
#mainFeatures li#sharing {
list-style-image:url(images/sharingListImage.png);
list-style-position:outside;
}
#mainFeatures li#linking {
list-style-image:url(images/linkingListImage.png);
list-style-position:outside;
}回答by Nikita Rybak
Most likely, your images were cut off by overflow: hidden. I've removed that and it works now: http://jsfiddle.net/ahwhj/
最有可能的是，您的图像被overflow: hidden. 我已经删除了它，现在可以使用了：http: //jsfiddle.net/ahwhj/
回答by Blur
Use as background can be done too. Example http://jsfiddle.net/huhu/r7kSf/
也可以用作背景。示例http://jsfiddle.net/huhu/r7kSf/
回答by Timbadu
If your html doesn't show properly in stackoverflow, it may contain errors. Try posting without the code format.
如果您的 html 在 stackoverflow 中没有正确显示，则它可能包含错误。尝试在没有代码格式的情况下发布。
回答by Deepak_Natarajan
#check li {
background: url(message.png) no-repeat -34px 7%;
background-origin: content-box;
background-size: 32px;
float: left;
}
