Html 您可以为无序列表中的每个列表元素使用不同的图标图像吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5707163/
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
Can you use different icon images for each list element within an unordered list?
提问by Patrick
I'm not an advanced user of CSS, but I have a decent working knowledge i suppose. I'm tryin to make an unordered list that uses different icons for each list element. I would also like the background colour of the list element to change upon hover.
我不是 CSS 的高级用户，但我想我有不错的工作知识。我正在尝试制作一个无序列表，为每个列表元素使用不同的图标。我还希望在悬停时更改列表元素的背景颜色。
Is there a way to do this through CSS, or would you just include the icon image within the list element (like below)?
有没有办法通过 CSS 来做到这一点，或者你只是在列表元素中包含图标图像（如下所示）？
<li><img src="voters.jpg"><a href="voters.html">Voters</a></li>
Using the list-style-imageon the ullevel makes all of the icons the same, and I haven't been able to figure out another way. Most examples I've found teach you how to use images in a list, but only if the bulleted images are the same. I'm definitely open to suggestions and improvements on the way I'm trying to do this.
在ul级别使用list-style-image使所有图标都相同，我一直无法找到其他方法。我发现的大多数示例都教您如何在列表中使用图像，但前提是项目符号图像相同。我绝对愿意接受有关我尝试这样做的方式的建议和改进。
thanks
谢谢
<div class="content-nav">
<ul>
<li class="instructions"><a href="instructions.html">Instructions</a></li>
<li class="voters"><a href="voters.html">Voters</a></li>
</ul>
</div>
.content-nav {
font-size:12px;
width:160px;
z-index:0;
}
.content-nav ul {
padding:0 20px;
margin:30px 0;
}
.content-nav li {
padding:5px;
margin:5px 5px;
}
.content-nav li a {
color:#666;
text-decoration:none;
}
.content-nav li.voters a {
background:#FFF;
color:#666;
text-decoration:none;
list-style-image:url(images/voters.jpg);
}
.content-nav li.voters a:hover {
background:#0CF;
color:#000;
}
.content-nav li.instructions a {
background:#FFF;
color:#666;
text-decoration:none;
list-style-image:url(images/voters.jpg);
}
.content-nav li.instructions a:hover {
background:#0CF;
color:#000;
}
回答by fin1te
You could add background images on each list element, and use padding to push the text away from it.
您可以在每个列表元素上添加背景图像，并使用填充将文本推离它。
<ul>
<li class="li1">List 1</li>
<li class="li2">List 2</li>
</ul>
.li1 {
background:url('li1.gif') 50% 50% no-repeat no-repeat;
padding-left: 5px;
}
.li2 {
background:url('li2.gif') 50% 50% no-repeat no-repeat;
padding-left: 5px;
}
Just make sure the padding-left is the same size as the image (or a bit larger if you want spacing)
只需确保 padding-left 与图像大小相同（或者如果你想要间距，则更大一点）
回答by drudge
Using CSS3's :nth-child()selector, does not require additional markup on each <li>element:
使用 CSS3 的:nth-child()选择器，不需要在每个<li>元素上附加标记：
HTML:
HTML：
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
CSS:
CSS：
ul li:nth-child(1) {
list-style-image: url('http://google-maps-icons.googlecode.com/files/teal01.png');
}
ul li:nth-child(2) {
list-style-image: url('http://google-maps-icons.googlecode.com/files/teal02.png');
}
ul li:nth-child(3) {
list-style-image: url('http://google-maps-icons.googlecode.com/files/teal03.png');
}
Browser Support:IE9+, FF3.5+, SA3.1+, OP9.5+, CH2+
浏览器支持：IE9+、FF3.5+、SA3.1+、OP9.5+、CH2+
回答by stlvc
I would suggest to use the icons as background-images for each list element. With this approach you can easily position the "bullet points" also (especially horizontal positioning).
我建议将图标用作每个列表元素的背景图像。通过这种方法，您还可以轻松定位“项目符号点”（尤其是水平定位）。
回答by Sjoerd
You try to set the list-style-imageproperty on an aelement. Try setting it on the lielement instead.
您尝试list-style-image在a元素上设置属性。尝试将其设置在li元素上。
回答by Jaspero
If you want to use different icons for each list, than give each list an unique name and use background-image and position it appropriately in CSS.
如果你想为每个列表使用不同的图标，那么给每个列表一个唯一的名称并使用 background-image 并在 CSS 中适当地定位它。
回答by nickornotto
Just use the image in contentproperty of your pseudo-element ::before:
只需在content伪元素的属性中使用图像::before：
li.item1::before {
content: url(/Images/icon/item1-icon.svg);
display: inline-block;
width: 1em;
margin-right: 6px;
margin-left: -1em;
}
You obviously need to have a class for each liwith different image.
显然，您需要为每个li具有不同图像的类设置一个类。
回答by IT Giup
/* C? cho language switcher */
.widget_polylang ul {
list-style: none;
}
.lang-item-en:before {
background: url(/wp-content/uploads/2020/03/us.png) no-repeat 0;
padding-left: 20px;
content: "";
}
.lang-item-vi:before {
background: url(/wp-content/uploads/2020/03/vn.png) no-repeat 0;
padding-left: 20px;
content: "";
}
i code for Polylang's language switcher
我为 Polylang 的语言切换器编写代码
