css - 如何使 dl 列表水平

Question

我有一个如下所示的列表:

<dl>
    <dt>Something</dt>
    <dd><div>Div with an image</div></dd>
    <dt>Second</dt>
    <dd><div>Second Div</div></dd>
</dl>

当您在页面上运行它时，它看起来是垂直的，而我希望它看起来是水平的。代码如下所示:

Something
Div with an image
Second
Second Div

但是我想要这样的东西:

Something                     Second
Div with an image             Second Div

我无法更改 dl 和 dt 元素的顺序，因为它是我无法修改的代码的一部分。但它们都带有类或 ID 标记，因此我可以修改 CSS。

那么，有没有什么办法可以让这个结构的列表看起来水平呢？

Answer 1

使用网格的解决方案。

dl {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
}