定义列表的元素<dl>的行为应类似于块

Question

给定一个定义列表，如

<dl>
<dt>first term</dt>
<dd>first term definition</dd>

<dt>second term</dt>
<dd>second term definition</dd>
<dt>the third term</dt>
<dd>third term definition</dd>
</dl>

我希望每个术语和它的定义表现得像一个块，即定义应该与相应的术语一起出现，就像一样

first term     first term definition
second term    second term definition
the third term third term definition

实现这一点的一种方法是将每个<dt>和<dd>对封装在<div>中，添加一个规则

dt, dd {
display: inline
}

但理想情况下，我希望在不添加任何额外元素的情况下实现这一点。

我还希望定义保持左对齐(如上所示(，无论每个术语有多长，也就是说，在定义上不使用类似margin-left: 50px的东西。

Answer 1

我不能诚实地建议这样做，因为通过改变元素的自然显示，它可能有未知的方面，但CSS网格可以做到这一点。

dl {
display: inline-grid;
}
dt {
grid-column: 1
}
dd {
grid-column: 2;
}

<dl>
<dt>first term</dt>
<dd>first term definition</dd>
<dt>second term</dt>
<dd>second term definition</dd>
<dt>the third term</dt>
<dd>third term definition</dd>
</dl>