2

假设你有这个定义列表（“集合”的数量并不重要，只是有多个）。

<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 列表，但这也不正确，因为它确实应该是一个列表。有任何想法吗？

4

4 回答 4

1

没有有效的标签可以将一对 dt 和 dd 标签包装在一起。为 XHTML 2.0 提出了一个di元素，但 XHTML 2.0 从未成功。

由于每个项目都有一对内部标签，因此它不像 a ul，其中每个li标签都可以充当每个列表项内容的内部包装器（在这种情况下充当每个列的包装器）。

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

编辑：

正如@biziclop 所提到的，一旦CSS3 多列布局被标准化和支持，就有可能在正确的位置打破列（除了布局方面的选项有限）。最终，代码将如下所示：

dl {column-width:100px; column-fill:auto;}
dt {break-before:always;}
于 2012-07-04T21:26:30.683 回答
0

我使用一组无序列表解决了这个问题：请在此处查看： //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;
}​

如果你坚持使用你的语义，我不确定一个可行的解决方案。这是因为每个定义术语及其定义并没有真正以易于样式化的方式分组？

于 2012-07-04T19:41:54.850 回答
0

让我们来玩一下 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;
}
于 2012-07-04T19:44:12.180 回答
0

可以使用一些绝对定位和第 n 个类型的选择器（旧浏览器无法识别 - 糟糕！ - 但媒体查询也不是，所以应该降级）：演示：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;}
}

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

于 2012-07-05T14:28:57.660 回答