gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 12:36:55 24 4
gpt4 key购买 nike

我不是 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;
}

最佳答案

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

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

只需确保 padding-left 与图像大小相同(如果需要间距,可以大一点)

关于html - 您可以为无序列表中的每个列表元素使用不同的图标图像吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5707163/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com