是否有包装一个DT和DD一个HTML元素的有效方法是什么？(Is there a valid way

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

不，伊恩·希克森（HTML规范编辑器）是相信 ，这是一个CSS问题，而不是HTML之一：

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

正确的解决方案是为CSS提供的是引入了一个匿名的容器放入一个包装要包装的元素渲染树一些伪元素或其他机制。

与此同时，fantasai（CSS规范编辑）相信在相反的 ：

我不认为这是一个CSS问题。 我认为这是一个HTML的问题。 伪元素是规范中的一个不平凡的事，并实现不平凡的事情，而使用比较混乱的事情。

然而，伊恩显然忽略并继续脱离现实。

有有同样的问题LEGEND （即必须是第一直接子FIELDSET根据HTML规范）， FIGCAPTION （即必须是第一个/最后一个直接子FIGURE ）和LI （直接孩子UL / OL ）。

至于DT / DD特别，我个人使用UL列表与DL内每个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>

因此，我们有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规范WHATWG是确定包装每个 DD＆DT里面DL div标签。

<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最语义的方式。

文章来源: Is there a valid way to wrap a dt and a dd with an HTML element?