我听说在内联元素中放入块元素是一种HTML错误:

<a href="http://example.com">
    <div>
        What we have here is a problem. 
        You see, an anchor element is an inline element,
        and the div element is a block level element.
    </div>
</a>

但是如果在样式表中将外部锚设置为display:block呢?还是错的吗?关于块级和内联元素的HTML 4.01规范似乎是这样认为的:

样式表提供了实现的方法 指定任意的呈现 元素,包括是否为元素 呈现为块或内联。在 有些情况,比如内联样式 对于列表元素,这可能是 恰当,但总的来说, 不鼓励作者 超越常规 HTML元素的解释 这种方式。

有没有人对这个问题有进一步的建议?


当前回答

在HTML5中,<div>这样的块级元素可以用<a>标签来包装。虽然<div>被认为是流内容的容器/包装器,而<a>被认为是根据MDN的流内容。从语义上讲,创建作为块级元素的内联元素可能更好。

其他回答

如果你要努力制作<a>块,为什么不把<a>放在div中,作为块元素,它会给你同样的效果。

这是错误的。使用span。

仅供参考。

如果你的目标是让你的div可点击,你可以使用jQuery / Java Script。

像这样定义你的div:

<div class="clickableDiv" style="cursor:pointer">
  This is my div. Try clicking it!
</div>

然后你的jQuery将像这样实现:

 <script type="text/javascript">

    $(document).ready(function () {

        $("div.clickableDiv").click(function () {
            alert("Peekaboo"); 
        });
    });
</script>

这也适用于多个潜水-根据汤姆的评论在这个线程

如果你想避免在锚标记中放置div的语义问题,只需将锚标记放在与div相同的级别上,用一个position: relative的容器包装它们,使你的锚标记position: absolute,并展开它来填充容器。此外,如果它不在内容流的末尾,请确保在那里抛出一个z索引,将其置于内容之上。

按照建议,我已经添加了一个标记代码:

<div class="div__container>
  <div class="div__one>
  </div>
  <div class="div__two">
  </div>
  <a href="#"></a>
</div>

还有css:

.div__container {
  position: relative; 
}
.div__container a {
  position: absolute;
  top: 0;
  bottom: 0;      
  left: 0;
  right: 0;
  z-index: 999;
}

在http://www.w3.org/TR/REC-html40/sgml/dtd.html上有一个针对HTML 4的DTD。这个DTD是规范的机器可处理形式,限制了DTD管理XML和HTML 4,特别是“暂时的”类型,允许许多不是“合法的”XML的东西。不过,我认为它接近于编纂说明符的意图。

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->

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

<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

我将把这个层次结构中列出的标签解释为允许的标签总数。

虽然规范可能会说“内联元素”,但我非常确定,它并没有打算通过将块元素的显示类型声明为内联来绕过这个意图。无论您如何滥用内联标记,它们都具有不同的语义。

另一方面,我发现包含special似乎允许嵌套A元素是很有趣的。规范中可能有一些强硬的措辞禁止这样做,即使它在xml语法上是正确的,但我不会进一步讨论这个问题,因为这不是问题的主题。