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

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


当前回答

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

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

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

其他回答

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

HTML5规范…现在可以将块级元素放入内联元素中。所以现在在一个'a'元素里面放一个'div'或者'h1'是非常合适的。

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

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

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

根据你要迎合的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的语义问题,只需将锚标记放在与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;
}