每个li有不同的列表样式图像
我的一些 ul 和 li 有问题...
我想创建一个包含 3 li 的无序列表,每个 li 都有不同的列表样式图像...
我写了这段代码,但图像没有出现......
你能帮我吗?谢谢!
编辑:用 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;
}
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...
Can you help me? Thanks!
EDIT: Post updated with HTML code ;)
<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;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
最有可能的是,您的图像被
overflow:hidden
截断。我已经删除了它,现在它可以工作了: http://jsfiddle.net/ahwhj/Most likely, your images were cut off by
overflow: hidden
. I've removed that and it works now: http://jsfiddle.net/ahwhj/也可以用作背景。示例 http://jsfiddle.net/huhu/r7kSf/
Use as background can be done too. Example http://jsfiddle.net/huhu/r7kSf/
如果您的 html 在 stackoverflow 中无法正确显示,则它可能包含错误。
尝试在没有代码格式的情况下发布。
If your html doesn't show properly in stackoverflow, it may contain errors.
Try posting without the code format.