html - 如何制作具有自动宽度的语义html水平定义列表？

Question

html 中的语义内联定义列表:

<dl>
  <dt>Item 1</dt>
  <dd>def. 1</dd>
  <dt>Item 2</dt>
  <dd>def. 2</dd>
</dl>

如何仅使用 css(无 js)将其呈现为 2 列并自动调整每列宽度？

使用固定宽度或百分比宽度很容易，但我没有找到任何自动宽度的解决方案。

(我尝试了 Flexbox 和多列)

有什么想法吗？

谢谢

Answer 1

一个极其简单的解决方案(语义，完全工作，没有 JavaScript):

dl.horizontal-definition-list {
    display: table;
    min-width: 400px;
}

.horizontal-definition-list dt, .horizontal-definition-list dd {
    padding: 2% 10%;
}

.horizontal-definition-list dt {
    display: table-cell;
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    background: gold;
}

.horizontal-definition-list dd {
    display: table-cell;
    background: silver;
}

.horizontal-definition-list dd.line-break {
    display: table-row;
}

<dl class="horizontal-definition-list">
    <dt>Term 1</dt>
    <dd>definition 1</dd>
    <dd class="line-break"></dd>
    <dt>Term 2</dt>
    <dd>definition 2</dd>
    <dd class="line-break"></dd>
    <dt>Term 3</dt>
    <dd>definition 3<br>(multiline, no problem)</dd>
    <dd class="line-break"></dd>
    <dt>Term 4</dt>
    <dd class="red-text">definition 4</dd>
</dl>