我听说在内联元素中放入块元素是一种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元素的解释 这种方式。

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


当前回答

这是错误的。使用span。

其他回答

不,它不会验证,但它通常会在现代浏览器中工作。也就是说,在你的锚中使用一个span,并在它上设置display: block,这肯定会在任何地方工作,它会验证!

我认为大多数时候当人们问这个问题时,他们已经建立了一个只有div的网站,现在其中一个div需要是一个链接。

我看到有人使用一个透明的空图像,PNG,在一个锚标记中,只是为了在一个div中创建一个链接,并且图像的大小与div相同。

其实挺难过的……但这很有效……

如果你将它更改为块风格元素,那么不,它不再是“错误的”,但它可能不会被验证。但你现在所做的并没有多大意义。你应该保持锚标记作为一个块级元素,没有内部div,或者把div放在外面。

任何方法都有用……直到你把它们嵌在一起。

你可以把表格、div、鸟和蜜蜂塞进去,浏览器会耐心地配合你。但是一旦你把另一个<a>标签放在里面,它就会把它们分开,把里面的标签放在外面的标签关闭之后。这值得一试,即使是在F12控制台,当你的浏览器不喜欢某些东西时,你会惊讶地发现它是多么严格。

所以没有这样的事情:

<a href="#1">
    <a href="#2"> Now what </a>
</a>

相反,它将变成:

<a href="#1"></a>
<a href="#2"> Now what </a>

同样的事情发生在<p>和其他一些;事实上,有一篇关于这个的Stacko文章-我可以嵌套这些标签吗?-唯一的答案有关键,在“HTML规范指示”部分寻找项目符号列表。最挑剔的显然是a和p,如h1..h6。(现在让我们诚实地说:你是否曾经专门使用p标签,因为它给了你别人没有的东西?……这么想的。我就把它扔了。)

TL, DR,你不能把a放在a里面。

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