13

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

问题 ：

CSS

在此处输入图像描述

萤火虫

在此处输入图像描述

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

错误的最终输出

在此处输入图像描述

解决方案 ：

正确输出我想要的

在此处输入图像描述

4

2 回答 2

14

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

然后只需在上面撒一些 flexbox 以阻止文本在项目符号下方换行。

我做了一个快速的jsfiddle 来演示它

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: '';
}
于 2013-04-10T11:25:41.067 回答
0

放和礼类

并将类的背景链接作为项目符号

于 2013-06-11T08:06:58.170 回答