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

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


当前回答

根据你要迎合的HTML版本:

HTML 5 states that the <a> element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)". HTML 4.01 specifies that <a> elements may only contain inline elements. A <div> is a block element, so it may not appear inside an <a>. Of course you are at liberty to style an inline element such that it appears to be a block, or indeed style a block so that it is rendered inline. The use of the terms inline and block in HTML refers to the relationship of the elements to the semantic structure of the document, whereas the same terms in CSS are related more to the visual styling of the elements. If you make inline elements display in a blocky manner, that's fine. However you should ensure that the structure of the document still makes sense when CSS is not present, for example when accessed via an assistive technology such as a screen reader - or indeed when examined by the mighty Googlebot.

其他回答

你不能把<div>放在<a>里面-它不是有效的(X)HTML。

即使你用display: block样式一个span,你仍然不能把块级元素放在里面:(X)HTML仍然必须遵守(X)HTML DTD(无论你使用哪个),不管CSS如何改变事情。

浏览器可能会按照您想要的方式显示它,但这并不意味着它是正确的。

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

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

我看到有人使用一个透明的空图像,PNG,在一个锚标记中,只是为了在一个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中,作为块元素,它会给你同样的效果。