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规范编辑器）convinced这是一个CSS问题，而不是HTML问题：

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

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

与此同时，幻想（CSS规范编辑）在contrary中确信：

我不认为这是一个CSS问题。我认为这是一个HTML问题。伪元素对于规范来说是一件非常重要的事情，而且是一件非平凡的事情要实施的东西，以及使用相对混乱的东西。

然而，伊恩显然忽视了这一点，并继续脱离现实。

LEGEND存在同样的问题（根据HTML规范必须是FIELDSET的第一个直接子项），FIGCAPTION（必须是{{1}的第一个/最后一个直接子项}}）和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列表之间建立关系，以使它们都属于一个列表。

更新（2016-11-14）：现在的HTML标准（WHATWG version）（自2016-10-31）allows UL } element（可选地与所谓的脚本支持元素DIV，SCRIPT混合）成为TEMPLATE元素的直接子元素。 W3C的HTML validator确实不对此更改进行了说明，但实验HTML5.org validator确实如此。

更新（2017-01-18）：结果显示规范not允许DL / {{1}多个嵌套DIV包装器因此，在实践中功能的实用性实际上非常有限，此处描述的DT→DD→UL方法仍然相关。

Answer 2

有一个repo about dd-dt wrapping。根据html规范，它是OK to wrap each dd＆amp; dt内有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 grid得到了很好的支持，如果主要目标是控制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。

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

3 个答案: