如何设置li标签的自定义项目符号图像？ [英] how can i set custom bullet image of li tag?

问题描述

我正在尝试将自定义图像设置为项目符号。当我使用背景或背景图像标签时，它是工作的，但不能与列表类别正确对齐。当我使用列表样式图像时，它不会将图像显示为项目符号。

问题：

CSS

Firebug

当我将鼠标移到Firebug上时，图像也会在Firebug中显示

错误的最终输出

解决方案：

正确输出所需内容

推荐答案

这是我倾向于使用的一种方法。将before添加到li，根据需要调整大小并向其添加背景图像。

然后只需洒上一些弹性框即可停止项目符号下的文本换行。

我快速地jsfiddle to demonstrate it

li {
    display: flex;
    align-items: center;
    margin: 10px 0;

    line-height: 30px;

    list-style: none;
}

li:before {
    display: block;
    flex-shrink: 0;
    width: 33px;
    height: 33px;
    margin-right: 10px;

    vertical-align: middle;

    background: url('https://image.flaticon.com/icons/png/128/1168/1168671.png') no-repeat left center;
    background-size: contain;

    content: '';
}

这篇关于如何设置li标签的自定义项目符号图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！