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

时间:2013-04-10 10:59:23

标签: css html-lists

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

问题:

的CSS

enter image description here

萤火虫

enter image description here

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

错误的最终结果

enter image description here

解决方案:

正确输出我想要的内容

enter image description here

2 个答案:

答案 0 :(得分:14)

这是一种使用背景图像作为子弹的方法。 我快速jsfiddle to demonstrate it

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 */
}

答案 1 :(得分:0)

Put and li Class

并将类'背景链接添加到图像作为项目符号