如何使 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

使用grid.

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