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标记包装在一起。有人为XHTML2.0提出了di元素，但XHTML2.0从未成功。

因为每个项目都有一对内部标记，所以它不像ul那样，每个li标记都可以充当每个列表项内容的内部包装器(在本例中，充当每个列的包装器)。

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

编辑：

正如@biziclop提到的，一旦CSS3 Multiple-column layout被标准化和supported，就有可能在正确的位置(除了布局之外的有限选项)将列分开。最终，代码将如下所示：

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

Answer 2

我使用一组无序列表解决了这个问题:请在这里查看：http://jsfiddle.net/radialglo/pXLB4/注意，宽度不需要设置，但出于演示目的，我设置了足够大的宽度，以便将其推到下一行。在小提琴上拖动html视口。

<div>
    <ul>Authors
        <li>John</li>
        <li>Luke</li>
    </ul>
    <ul>
    <li>Editor</li>
    <li>Frank</li>
    </ul>
</div>​

还有这个样式：

div ul{
    float: left;
    list-style: none;
    width: 100px;
    margin-bottom: 1em;
}​

如果你坚持使用你的语义，我不确定一个可行的解决方案。这是因为每个定义术语及其定义并不是以一种容易设置样式的方式对进行分组的。

Answer 3

让我们来看看CSS3不太支持的多列特性：

缺点：

• 需要固定高度
• 不会包装(除非您编写一些媒体查询)

http://jsfiddle.net/rCQbP/5/

dl {
    -webkit-column-width: 100px;
       -moz-column-width: 100px;
            column-width: 100px;
    /* fixed height MUST be used */
    height: 200px;
}

dt ~ dt {
    /* simulate column-break-before: always; */
    margin-top: 1000px;
}