有没有一种有效的方法来包装带有HTML元素的dt和dd？

Question

我希望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>

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

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

Answer 1

不,Ian Hickson(HTML规范编辑器)确信这是一个CSS问题,而不是HTML问题:

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

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

与此同时,fantasai(CSS规范编辑)相反地说服了:

我不认为这是一个CSS问题.我认为这是一个HTML问题.伪元素对规范来说是一件非常重要的事情,实现起来是一件非常重要的事情,而且使用起来比较混乱.

然而,伊恩显然忽略了这一点,并继续脱离现实.

同样的问题LEGEND(必须是FIELDSET根据HTML规范的第一个直接孩子),FIGCAPTION(必须是第一个/最后一个直接孩子FIGURE)和LI(UL/的直接孩子OL).

至于DT/ DD特别是,我个人在每个内部使用UL列表:DLLI

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

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

所以我们必须DL在DT和之间建立关系DD,并UL列出使它们都属于一个列表.

更新(2016年11月14日): HTML标准(WHATWG版现在)现在(因为2016年10月31日)允许的DIV元素(可以用所谓的脚本的支持元素混合SCRIPT,TEMPLATE)是直接孩子DL的元素.W3C的HTML验证并不能解释这种变化还没有,但实验HTML5.org验证呢.

更新(2017年1月18日):原来,规范并没有允许多个嵌套DIV的包装DT/ DD,所以在实践中功能的用处其实是非常有限的,UL→交通LI→交通DL此处描述的方法仍然是相关的.

Answer 2

关于dd-dt包装有一个回购。根据html spec whatwg，可以将每个 dd和dt用div标签包装在DL中。

<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>

Answer 3

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。