[英]Image as bullet point is not displayed in HTML, CSS
I have a list containing different statements. 我有一个包含不同语句的列表。 Each statement should have an individual image as a bullet point.
每个语句应有一个单独的图像作为项目符号。 No image is shown as a bullet point, but the normal "disc" ones.
没有图像显示为项目符号,而是正常的“光盘”图像。
/* I tried different approaches like: */ #boxes .search li { list-style-image: url('./img/icons/search.svg') }
<section id="boxes"> <div class="advantages"> <ul id="search"> <li>My statement, which should display "search" as a bullet image</li> </ul> <ul id="time"> <li>My statement, which should display "time" as a bullet image</li> </ul> <ul id="open_folder"> <li>My statement, which should display "a folder" as a bullet image</li> </ul> <ul id="shake"> <li>My statement, which should display "a handshake" as a bullet image</li> </ul> </div> </section>
try 尝试
#boxes li{
background-image: url('./img/icons/search.svg')
}
EDIT from comments it sounds like you want : 从评论中编辑 ,听起来像是您想要的:
#search {
background-image: url('./img/icons/search.svg')
}
You are missing semi-colon in the css code. 您在CSS代码中缺少分号。 here's the working code-
这是工作代码-
#boxes ul#search li{
list-style-image: url('http://css-plus.com/examples/2011/12/custom-list-style/i/tick.png');
}
OR 要么
#boxes #search li{
list-style-image: url('http://css-plus.com/examples/2011/12/custom-list-style/i/tick.png');
}
https://www.codeply.com/go/g747DzzOqe https://www.codeply.com/go/g747DzzOqe
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.