58

我希望 HTML 可以做一些在语义上等同于此的事情；

<dl class="main-list">
    <definitionitem>
        <dt>Some Thing</dt>
            <dd>You know it!</dd>
        <dt>Another Thing</dt>
            <dd>Word.</dd>
    </definitionitem>
    <definitionitem>
        <dt>Stuff</dt>
            <dd>Alright!</dd>
    </definitionitem>
</dl>

但是，由于我最接近的是我对语义不是 100% 满意的东西；

<div class="redundant-wrapper">
    <dl class="main-list">
        <dt>Some Thing</dt>
            <dd>You know it!</dd>
        <dt>Another Thing</dt>
            <dd>Word.</dd>
    </dl>
    <dl class="another-main-list">
        <dt>Stuff!</dt>
            <dd>Alright!</dd>
    </dl>
</div>

我想知道是否有人对您如何做到这一点有任何其他想法？

此外，将项目分组的原因是因为它们在被标记的内容中可视地分组。想象一个字典页面，有一个定义列表，其中每个定义都在一个向左浮动的插入框中。我一直遇到这种情况。

4

3 回答 3

76

不，Ian Hickson（HTML 规范编辑器）确信这是一个 CSS 问题，而不是 HTML 问题：

这不应该是必要的。这是 CSS 的限制。

正确的解决方案是让 CSS 提供一些伪元素或其他机制，将匿名容器引入到渲染树中，以包装您要包装的元素。

与此同时，fantasai（CSS 规范编辑器）则相反：

我认为这不是 CSS 问题。我认为这是一个 HTML 问题。伪元素对于规范来说是一件不平凡的事情，实现起来也是一件不平凡的事情，而且使用起来比较混乱。

尽管如此，伊恩显然忽略了这一点，并继续与现实脱节。

LEGEND（必须是FIELDSET根据 HTML 规范的第一个直接子级）、FIGCAPTION（必须是 的第一个/最后一个直接子级FIGURE）和LI（UL/的直接子级）存在相同的问题OL。

至于DT/DD特别是，我个人使用 ULlist with DLinside each LI：

<ul>
    <li><dl>
        <dt>Lorem</dt>
        <dd>Lorem definition</dd>
    </dl></li>

    <li><dl>
        <dt>Ipsum</dt>
        <dd>Ipsum definition</dd>
    </dl></li>
</ul>

所以我们必须在and和listDL之间建立关系，使它们都属于一个列表。DTDDUL

更新（2016-11-14）： HTML 标准（现在是WHATWG 版本）现在（自 2016-10-31 起）允许DIV元素（可选地与所谓的脚本支持元素混合SCRIPT）成为元素TEMPLATE的直接子DL元素。W3C 的HTML 验证器尚未考虑此更改，但实验性HTML5.org 验证器可以。

更新（2017-01-18）：原来规范不允许多个嵌套DIV包装器DT/ DD，因此该功能在实践中的实用性实际上非常有限，UL这里描述的 →<code>LI→<code>DL 方法仍然相关。

于 2012-06-12T13:48:51.657 回答
14

有一个关于 dd-dt wrapping 的仓库。根据 html 规范 whatwg 可以在 DL 中用 div 标签包装每个dd & dt 。

<dl>
   <div>
     <dt>Bolster</dt>
     <dd>to support, strengthen, or fortify</dd>
   </div>
   <div>
     <dt>Capitalize</dt>
     <dd>to use to your advantage</dd>
   </div>
</dl>
于 2018-06-05T13:57:52.543 回答
6

2018年我们在这里！CSS 网格得到很好的支持，如果主要目标是控制dt/ dd...

HTML

<dl>
    <dt>Favorite food</dt>
    <dd>Pizza</dd>

    <dt>Favorite drink</dt>
    <dd>Beer</dd>
</dl>

CSS

dl {
    display: grid;
    grid-template-columns: min-content 1fr;
}

（您可以调整 的值grid-template-columns以匹配您的特定设计要求。）

这并不能“解决”规范的限制，但我认为它很有帮助，因为您特别提到了对语义标记的担忧。正如我上面提到的，网格可以做什么是有限制的，但如果目标是控制dt/的布局，dd我认为这可能是最符合语义的方式，它仍然是有效的 HTML。

于 2018-10-17T17:34:36.223 回答