html - dl元素的分组

Question

假设您有这个定义列表(“集合”的数量并不重要，重要的是不止一个)。

<dl>
  <dt>Authors
  <dd>John
  <dd>Luke

  <dt>Editor
  <dd>Frank
</dl>

我想让这些定义横向进行。所以你会得到这样的东西:

Authors    Editor
John       Frank
Luke

如果您调整浏览器的大小使其太窄，它会像这样换行:

Authors
John
Luke

Editor
Frank

有什么办法可以很好地做到这一点吗？

如果我理解正确的话，dl 中唯一合法的元素是 dt 和 dd 项，所以我不能将它们包装在 div 元素或类似元素中。我可以将它们分成单独的 dl 列表，但这也不是真的正确，因为它实际上应该是一个列表。有什么想法吗？

Answer 1

没有有效的标签可以将一对 dt 和 dd 标签包装在一起。 di 元素被提议用于 XHTML 2.0，但 XHTML 2.0 从未成功。

由于每个元素都有一对内部标签，它不像 ul，其中每个 li 标签都可以充当每个列表内容的内部包装器item(在本例中充当每列的包装器)。

基本上，对每一列使用dl 或ul。语义标记很好，但是如果没有 di，单个 dl 就不能很好地适应这种类型的布局。

编辑:

正如@biziclop 提到的，一旦CSS3 Multiple-column layout是标准化的并且supported , 可以在正确的位置断开列(除了布局方面的选项有限)。最终，代码看起来像这样:

dl {column-width:100px; column-fill:auto;}
dt {break-before:always;}