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

问题描述

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

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

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

标记：

    <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 和它的类来实现内联列表。

解决方法

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

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/