Question

我不是CSS的高级用户，但我认为我有一个体面的工作知识。我正在尝试制作一个无序列表，为每个列表元素使用不同的图标。我还希望列表元素的背景颜色在悬停时更改。

有没有办法通过CSS执行此操作，或者您只是在列表元素中包含图标图像（如下所示）？

<li><img src="voters.jpg"><a href="voters.html">Voters</a></li>

使用 ul 级别的 list-style-image 会使所有图标都相同，而我却无法找到其他方法。我发现的大多数例子都教你如何在列表中使用图像，但前提是项目符号图像是相同的。对于我试图这样做的方式，我绝对乐于接受建议和改进。

感谢

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

Answer 1

您可以在每个列表元素上添加背景图像，并使用填充将文本推离它。

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

确保填充左边的尺寸与图像相同（如果你想要间距，可以稍微大一些）

Answer 2

使用CSS3的:nth-child()选择器，每个<li>元素不需要额外的标记：

<强> Live Demo

<强> HTML：

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

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

浏览器支持： IE9 +，FF3.5 +，SA3.1 +，OP9.5 +，CH2 +

Answer 3

我建议使用图标作为每个列表元素的背景图像。使用这种方法，您也可以轻松定位“子弹点”（尤其是水平定位）。

Answer 4

您尝试在list-style-image元素上设置a属性。请尝试在li元素上进行设置。

Answer 5

如果您想为每个列表使用不同的图标，请为每个列表指定一个唯一的名称，并使用背景图像并在CSS中正确定位。

Answer 6

只需在伪元素content的{{1}}属性中使用图片：

::before

您显然需要为每个li.item1::before { content: url(/Images/icon/item1-icon.svg); display: inline-block; width: 1em; margin-right: 6px; margin-left: -1em; }使用不同图像的类。

Answer 7

/* 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用于Polylang语言切换器的代码

您可以为无序列表中的每个列表元素使用不同的图标图像吗？

7 个答案: