我听说在内联元素中放入块元素是一种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如何改变事情。
浏览器可能会按照您想要的方式显示它，但这并不意味着它是正确的。
其他回答
你可以通过添加"::before"伪元素来实现
纯CSS技巧;)
a:before{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: auto; content: ""; background-color: rgba(0,0,0,0); } <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="card" style="width: 18rem;"> <img src="https://via.placeholder.com/250" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card with stretched link</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary stretched-link">Go somewhere</a> </div> </div>
如果你将它更改为块风格元素，那么不，它不再是“错误的”，但它可能不会被验证。但你现在所做的并没有多大意义。你应该保持锚标记作为一个块级元素，没有内部div，或者把div放在外面。
仅供参考。
如果你的目标是让你的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>
这也适用于多个潜水-根据汤姆的评论在这个线程
根据你要迎合的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;
}
