如何使语义html水平定义列表与自动宽度

Question

html中语义内联定义列表:

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

如何在2列中使用css(没有js)和每个列的自动宽度来呈现这个?

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

(I tried flexbox and multiccolumns)

你知道吗?

谢谢

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>
    

Answer 2

所以我有一个使用flexbox的解决方案，但我认为如果不指定半宽度，你就做不了什么。

*{
  box-sizing: border-box;
}
dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  text-align: center;
}
dl dt,
dl dd {
  width: 50%;
  margin: 0;
  border: 1px solid red;
}

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

指出

:

1. 我使用flex-wrap来实现每个元素在屏幕的一半宽度的布局

2. dd有一个默认的边距值，你应该使用margin: 0重置。

请让我知道你对此的反馈。谢谢!

编辑:

如果您有多个dd，那么您可以使用:

*{
  box-sizing: border-box;
}
dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  text-align: center;
}
dl dt,
dl dd {
  width: 50%;
  margin: 0;
  border: 1px solid red;
}
dl dt ~ dd + dd {
   margin-left: 50%;
}

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