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标签包装在一起。为XHTML 2.0提出了di元素，但XHTML 2.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;
}

Answer 4

有可能使用一些绝对定位和nth-of-type选择器（旧浏览器无法识别 - 哎呀！ - 但媒体查询也不是，所以应该降级OK）：演示：http://jsfiddle.net/PrJWJ/6/

dt,dd{margin:0;}

@media (min-width:20em) /* 10em per column */
{
    /* Enable positioning*/
    dl{position:relative;}
    dt,dd{position:absolute;}

    dt{top:0;} /* All terms at the top */
    dd{top:1.3em;}  /* 1st dd under a term at 1.3em (factoring in line spacing) */
    dd+dd{top:2.6em;} /* 2nd dd under a term */

    /* 1st column */
    dt:nth-of-type(1),
    dt:nth-of-type(1)~dd
    {left:0;}

    /* 2nd column */
    dt:nth-of-type(2),
    dt:nth-of-type(2)~dd
    {left:10em;}
}

@media (max-width:19.99em)
{
    /* Space before a new term */
    dd+dt{margin-top:1em;}
}

但是，您需要根据最大可能的行数和列数来扩展它。

dl项的分组

4 个答案: