如何设置li标签的自定义子弹图像?

Ana*_*hta 13 css html-lists

我试图将自定义图像设置为子弹.当我使用背景或背景图像标签时它是工作但不能与列表类别正确对齐.当我使用list-style-image时,它不会将图像显示为子弹.

问题:

CSS

在此输入图像描述

萤火

在此输入图像描述

当我将鼠标移到上面时,图像也会显示在萤火虫中

错误的最终输出

在此输入图像描述

方案:

正确输出我想要的

在此输入图像描述

Ada*_*mat 14

这是一种方法,使用背景图像作为子弹.我做了一个快速的jsfiddle来演示它

li {
    height: 19px;
    margin: 10px 0; /* not needed, just to add space between the li's */
    background: url('../images/vmgeneral/errow.png') no-repeat left center;
    list-style: none; /* Get rid of the default bullet points */
    padding-left: 25px; /* Offsets the text. Needs to be at least the width of your image */
    line-height: 20px; /* Might have to play with this value a bit */
}
Run Code Online (Sandbox Code Playgroud)