html - 并排渲染两里

Question

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

我想并排渲染成分的名称和图片，目前它只是一个显示在另一个上面。我附上了最终输出的图像。

我如何只使用 css 来实现这一点？

谢谢。

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

Answer 1

你必须像这样制作 h3 inline:

.ingredient h3 {
  display: inline;
}

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