并排渲染两个li

Question

在不更改HTML的情况下如何实现附件的外观。

我要渲染成分的名称，并且图片目前并排显示，只是将其显示在另一个上方。我已附上最终输出的图像。

我如何仅使用CSS并实现这一目标？

谢谢。

<ul>
        <li class="ingredient">
            <h3>Sourdough Bun Top</h3>
            <img src="./ingredients/sourdough_top.png">
        </li>

Answer 1

您必须像这样使h3 .ingredient h3 { display: inline; }：

<ul>
    <li class="ingredient">
        <h3>Sourdough Bun Top</h3>
        <img src="./ingredients/sourdough_top.png">
    </li>
</ul>

val()

Answer 2

在ingredient类中使用此属性。

.ingredient{
  display:flex;
}