如何设置li标签的自定义项目符号图像？

Question

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

问题：

CSS

萤火虫

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

最终输出错误

解决方案：

正确输出我想要的内容

Answer 1

这是我倾向于依赖的一种方法。将

before

添加到

li

，根据需要调整大小并为其添加背景图像。

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

我做了一个快速的 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: '';
}

Answer 2

Put 和 li 类

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

Answer 3

#image {
  line-height: 1.5em;
  list-style-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/treehouse-marker.png);
}

<h3><code>list-style-image</code></h3>
  <ul id="image">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>
  
</div>