[英]Image as bullet point is not displayed in HTML, CSS
我有一個包含不同語句的列表。 每個語句應有一個單獨的圖像作為項目符號。 沒有圖像顯示為項目符號,而是正常的“光盤”圖像。
/* 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>
嘗試
#boxes li{
background-image: url('./img/icons/search.svg')
}
從評論中編輯 ,聽起來像是您想要的:
#search {
background-image: url('./img/icons/search.svg')
}
您在CSS代碼中缺少分號。 這是工作代碼-
#boxes ul#search li{
list-style-image: url('http://css-plus.com/examples/2011/12/custom-list-style/i/tick.png');
}
要么
#boxes #search li{
list-style-image: url('http://css-plus.com/examples/2011/12/custom-list-style/i/tick.png');
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.