html - CSS float dt/dd 成对离开

Question

我有以下 html 代码:

<dl>
  <dt>term1</dt><dd>defn1</dd>
  <dt>term2</dt><dd>defn2</dd>
  <dt>term3</dt><dd>defn3</dd>
</dl>

我试图让它们成对 float (宽度相同)，所有 dt 都在第一行，所有 dd 在第二行一个。

像这样:

term1 term2 term3
defn1 defn2 defn3

我尝试了各种显示组合: block (+ float /清除)、内联 block 、table-*、flex，但没有一个接近。

知道怎么做吗？

Answer 1

这是一个使用 flex box 的列表，没有更改您的列表，只是 CSS。基本上只是使用 nth-child 伪选择器定义 dl 的子元素的顺序。遗憾的是，此处使用的 calc() 方法取决于您知道列表中的 child 数量(在我的示例中:4)。

仅使用 CSS 你无法真正确定 child 的数量，但如果你知道列表中的最大元素数，你可以计算 sibling 并为不同情况准备你的 CSS:

Can CSS detect the number of children an element has?

dl {
  display: flex;
  flex-flow: row wrap;
}

dt,dd {
  margin: 0;
  flex-grow: 1;
  }

dt {
  order: 0;
  flex-basis: calc(100%/4);
}

dd {
  order: 1;
  flex-basis: calc(100%/4);
}

<dl>
  <dt>term1</dt><dd>defn1</dd>
  <dt>term2</dt><dd>defn2</dd>
  <dt>term3</dt><dd>defn3</dd>
  <dt>term4</dt><dd>defn4</dd>
</dl>