简体   繁体   中英

adding image in list-style-type instead of list-style-image

Please someone guide me how to show list style image in ul li in following code:

I need to show image in list-style-type , because In my page list-style-image not working.

Here is my CSS based on list-style-image

ul.footerlist {padding-left:20px; list-style-image:url('../../images/li.png');}
ul.footerlist li{line-height:24px; }
ul.footerlist li a{color:#303030; }
ul.footerlist li a:hover{color:#0099cc; text-decoration:none;}

 ul.footerlist {padding-left:20px; list-style-type:url('https://mdn.mozillademos.org/files/11981/starsolid.gif');} ul.footerlist li{line-height:24px; } ul.footerlist li a{color:#303030; } ul.footerlist li a:hover{color:#0099cc; text-decoration:none;} 
 <ul class="footerlist go-right go-text-right"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> 

List style type will not show a custom image. The documentation looks like it only shows common shapes / letters etc ( http://www.w3schools.com/cssref/pr_list-style-type.asp )

I think you should try to get List style image working again.

Are you sure that your image was uploaded to ../../images/li.png and that it can be viewed? Are there relative path issues or permission issues?


Reply two:

This piece of code seems to work correctly. Do you agree?

 ul.footerlist {padding-left:20px; list-style-image:url('https://mdn.mozillademos.org/files/11981/starsolid.gif');} ul.footerlist li{line-height:24px; } ul.footerlist li a{color:#303030; } ul.footerlist li a:hover{color:#0099cc; text-decoration:none;} 
 <ul class="footerlist go-right go-text-right"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM