如何在内联列表中的每个项目之前放置图像？

Question

我正在尝试创建一个在每个列表项之前显示图像的内联列表。目前图片显示在列表项上方，不在同一行。

我的目标是让图像出现在项目的左侧，在同一行上，这样它就像每个项目之间的 bullet/space。

这就是我目前的尝试......

标记：

    <ul class="list-inline">
      <li class="list-inline-item"><h4>Item One</h4></li>
      <li class="list-inline-item"><h4>Item Two</h4></li>
      <li class="list-inline-item"><h4>Item Three</h4></li>
    </ul>

Css:

ul li::before { 
content: url("~@/assets/asset-1.png");
display:inline-block
}

如您所见，我目前使用的是bootstrap 4，实现内联列表是类。

Answer 1

如 Temani Afif 所述，您缺少 css 中的 h4 定义。

CSS:

ul li h4::before { 
  content: url("~@/assets/asset-1.png");
  display:inline-block
}

或者，如果您有兴趣 - FlexBox 让这件事变得非常简单有趣！

这个站点组合得很好，是一个很好的 FlexBox 参考： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何在内联列表中的每个项目之前放置图像？

How can I position image before each item in inline list?

css

bootstrap-4

listitem