如何将块级元素放在内联元素中?

时间:2013-08-03 16:20:39

标签: html validation dom dtd xml-dtd

在我的部分代码中,我将<DIV>元素放在<SPAN>中。使用CSS自定义它没有问题,但页面没有通过W3验证。

代码如下所示:

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

验证后我收到了这个错误:

  

上述元素不允许出现在上下文中   你放了它;其他提到的元素是唯一的元素   都允许在那里,并可以包含提到的元素。这个   可能意味着你需要一个包含元素,或者你可能需要   忘记关闭前一个元素。一个可能的原因   消息是您尝试放置块级元素(例如   作为“<p>”或“<table>”)内联元素(例如“<a><span>“或”<font>“)。

我知道如果我放<div>代替<span>,这很容易修复,但我对其他解决方案感兴趣:

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

3 个答案:

答案 0 :(得分: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的评论;不推荐)

重新声明<SPAN>

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

或者,要应用于所有内联元素更改

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

答案 1 :(得分:0)

你不能(或不应该),因为它违反规范。

跨度只能包含“短语内容”。基本上这归结为: <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

答案 2 :(得分:0)

您(以及此处的大部分答案)似乎将三个截然不同的概念混为一谈:有效性,HTML(或XHTML)DTD的有效性以及与HTML(或XHTML)规范的一致性。

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

    您可以通过提供文档有效的DTD使任何文档有效(在绝对意义上)。这允许数据通过无意义和无意义的测试,这些测试要求XML在其生命周期中的某个特定点有效,而不指定它对哪个模式有效。 (听起来好像是在试图让数据通过这样的测试,虽然目前尚不清楚这种无意义和毫无意义的测试是否被其他人或你强加给你。)

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

  • 当且仅当(X)HTML DTD符合(DTN)DTD中表达的规则时,文档才对(某一特定风格)有效。

    您不能使嵌入div元素内的span元素的HTML文档对该DTD有效,因为已定义DTD禁止此类嵌入。修改DTD以使其接受这样的嵌入具有产生新的和不同的DTD的自然结果,该DTD不再是(X)HTML DTD。

  • 当且仅当文档符合该规范中列出的文档的一致性要求时,才符合(X)HTML规范。

    您不太可能导致在div元素中嵌入span元素的文档被视为符合要求。一个结论性的演示需要花费更多的时间来使用HTML规范,而不是今天早上我倾向于花费的时间。