有没有一种有效的方法来包装一个DT和一个HTML元素的DD？ [英] Is there a valid way to wrap a dt and a dd with an HTML element?

问题描述

我希望HTML可以在语义上做相同的事情;

 < dl class =main-list> 
< definitionitem> 
< dt> Some Thing< / dt> 
< dd>您知道它！< / dd> 
< dt>另一件事< / dt> 
< dd> Word。< / dd> 
< / definitionitem> 
< definitionitem> 
< dt> Stuff< / dt> 
< dd>好的！< / dd> 
< / definitionitem> 
< / dl> 
  

但是，由于距离我最近的地方，我不是100％满意语义;

 < div class =redundant-wrapper> 
< dl class =main-list> 
< dt> Some Thing< / dt> 
< dd>您知道它！< / dd> 
< dt>另一件事< / dt> 
< dd> Word。< / dd> 
< / dl> 
< dl class =another-main-list> 
< dt> Stuff！< / dt> 
< dd>好的！< / dd> 
< / dl> 
< / div> 
  

我在想，如果有人有任何其他想法可以做到这一点？

另外，这些项目将被分组的原因是因为它们在被标记的内容中被可视化分组。设想一个字典页面，带有一个定义列表，其中每个定义位于左侧浮动的嵌入框中。我一直遇到这种情况。

解决方案

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

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

正确的解决方案是CSS提供一些伪元素或其他
机制，将匿名容器引入到渲染$ b中$ b tree，它包装了你想要包装的元素。

同时，fantasai（CSS规范编辑器） href =http://lists.w3.org/Archives/Public/www-style/2012Feb/0231.html =noreferrer>> ：

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

尽管如此，伊恩显然已经忽略了这一点，并且仍然与现实脱节。 LEGEND （必须是第一个直接孩子根据HTML规范， FIELDSET ）， FIGCAPTION （它必须是 FIGURE >的第一个/最后一个直接子元素）和 LI （ UL / OL 的直接子元素） p>



至于 DT / DD 在 LI 中的 UL 列表中， DL p>



 < ul> 
< li>< dl> 
< dt> Lorem< / dt> 
< dd> Lorem定义< / dd> 
< / dl>< / li> 
 
< li>< dl> 
< dt> Ipsum< / dt> 
< dd> Ipsum定义< / 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 -01-18）：原来不是为 DT / DD DIV 封装器>，实际上该功能的实用性实际上非常有限，并且 UL → LI → DL 这里描述的方法仍然相关。

I wish HTML could do something semantically equivalent to this;

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

However, since the closest I've come is something I'm not 100% satisfied with the semantics of;

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

I was wondering if anyone has any other ideas of how you might do this?

Also, the reason the items would be grouped is because they are visually grouped in the content that is being marked up. Imagine a dictionary page, with a single definition list, where each definition is in an inset box that is floated left. I run into this situation all the time.

解决方案

No, Ian Hickson (HTML spec editor) is convinced that this is a CSS problem, not an HTML one:

This shouldn't be necessary. It's a limitation of CSS.

The right solution is for CSS to provide some pseudo-element or other mechanism that introduces an anonymous container into the rendering tree that wraps the elements you want to wrap.

At the same time, fantasai (CSS spec editor) is convinced in contrary:

I don't think this is a CSS problem. I think it's an HTML problem. Pseudo-elements are a non-trivial thing to spec, and a non-trivial thing to implement, and a comparatively confusing thing to use.

Nevertheless, Ian apparently ignores that and continues to be detached from reality.

There are same problems with LEGEND (that must be first direct child of FIELDSET according to HTML spec), FIGCAPTION (that must be first/last direct child of FIGURE), and LI (direct child of UL/OL).

As for DT/DD in particular, I personally use UL list with DL inside each of 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>

So we have DL to make relation between DT and DD, and UL list to make them all belong to one list.

Update (2016-11-14): The HTML standard (WHATWG version for now) now (since 2016-10-31) allows the DIV element (optionally intermixed with so-called script-supporting elements SCRIPT, TEMPLATE) to be direct children of DL elements. W3C’s HTML validator does not account for this change yet, but the experimental HTML5.org validator does.

Update (2017-01-18): Turns out the spec does not allow more than one nested DIV wrapper for DT/DD, so usefulness of the feature in practice is actually very limited and the UL→LI→DL approach described here is still relevant.

这篇关于有没有一种有效的方法来包装一个DT和一个HTML元素的DD？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！