如何将块级元素放入内联元素中？

Question

在我的部分代码中，我将<DIV> 元素放在<SPAN> 中。通过 CSS 自定义，它可以正常工作，但页面没有通过 W3 验证。

代码如下：

<span class="spanclass">
    <div class="divclass">Content</div>
</span>

验证后出现此错误：

所提到的元素不允许出现在上下文中 你已经放置了它；其他提到的元素是唯一的元素 都允许在那里并且可以包含提到的元素。这 可能意味着您需要一个包含元素，或者您可能已经 忘记关闭前一个元素。造成这种情况的一个可能原因 消息是您试图放置一个块级元素（例如 作为内联元素中的“<p>”或“<table>”）（例如“<a>”<span>“或“<font>”）。

我知道如果我使用 <div> 而不是 <span> 可以轻松解决此问题，但我对另一种解决方案感兴趣：

如何使用DTD 声明强制验证器，以允许内联元素中的块级元素？

Answer 1

您已经知道它是无效的 HTML。因此，为了符合标准实践并仍然实现您想要重用您的spanclass CSS 来定义一个新的 CSS 类为

spanclass, divlikespanclass {
  /* span css data */
}

并将您的 HTML 更改为

<div class="divlikespanclass">
    <div class="divclass">Content</div>
</div>

或者，简单地说

<div class="divclass divlikespanclass">Content</div>

编辑：（响应 OP 的 cmets；但不推荐）

重新声明<SPAN>为

<!ELEMENT SPAN - - ((%inline;) | DIV)*  -- generic language/style container -->

或者，应用于所有内联元素的变化

<!ENTITY % inline "#PCDATA | DIV | %fontstyle; | %phrase; | %special; | %formctrl;">

Answer 2

您（以及此处的大多数答案）似乎混淆了三个截然不同的概念：有效性、针对 HTML（或 XHTML）DTD 的有效性以及对 HTML（或 XHTML）规范的一致性。

• 当且仅当文档符合特定 DTD 中表达的规则时，文档才对特定 DTD 有效。

  您可以通过提供文档有效的 DTD 来使任何文档有效（在某种绝对意义上）。这允许数据通过无意义和无意义的测试，这些测试要求 XML 在其生命周期中的某个特定点有效，而无需指定它对什么模式有效。 （您听起来好像是在试图让数据通过这样的测试，但目前尚不清楚这种无意识和无意义的测试是别人强加给您的，还是您自己强加给您的。）

  具体而言，您可以通过告诉验证器使用适当的 DTD（或其他模式）来使通用 XML 验证器报告您的输入是有效的。如果您制作了 XHTML DTD 的修改版本，并从您的文档中指向它，那么您描述的文档很容易被报告为针对该 DTD 有效。 （这不一定适用于 HTML 的 W3C 验证服务，因为该服务不是通用的基于 DTD 的验证器，它对 HTML 输入使用特殊规则。）

• 当且仅当文档符合该（该风味的）DTD 中表达的规则时，文档才针对（X）HTML DTD（该风味的某个风味）有效。

  您不能使在span 元素中嵌入div 元素的HTML 文档对该DTD 有效，因为根据定义，DTD 禁止此类嵌入。修改 DTD 以使其接受此类嵌入具有生成新的不同 DTD 的自然结果，该 DTD 不再是 (X)HTML DTD。

• 一个文档符合 (X)HTML 规范当且仅当它满足该规范中规定的文档的一致性要求。

  您不太可能使在span 元素中嵌入div 元素的文档被视为符合标准。一个结论性的演示需要比我今天早上花更多的时间来处理 HTML 规范。

Answer 3

你不能（或不应该）因为它违反规范。

跨度只能包含“短语内容”。基本上这归结为： <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> or plain text。 请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content 了解更多信息