如何在没有 JavaScript 的情况下使整个“div”在 html 和 css 中可点击？

Question

我想让它在没有 JavaScript 和有效代码/标记的情况下点击整个 div 并链接到另一个页面。

如果我有这个，这就是我想要的结果 -

 <a href="#">
<div>This is a link</div>
</a>

W3C 验证器指出块元素不应放在行内元素中。有一个更好的方法吗？

原文由 Andy Lobel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在没有javascript且使用有效代码的情况下单击时，整个div链接到另一个页面，这可能吗？

迂腐的回答：没有。

正如您已经发表的另一条评论，将 div 嵌套在 a 标签内是无效的。

但是，没有什么可以阻止您使 a 标记的行为与 div 非常相似，除了您不能在其中嵌套其他块标记。如果它适合您的标记，请在您的 a 标签上设置 display:block 标签并根据需要调整大小/浮动。

如果您违背问题的前提，即您需要避免使用 javascript，正如其他人指出的那样，您可以使用 onClick 事件处理程序。 jQuery 是一种流行的选择，可以使它变得简单和可维护。

更新：

在 HTML5 中，将 <div> 放在 <a> 中是有效的。

请参阅 http://dev.w3.org/html5/markup/a.html#a-changes （感谢 Damien ）

原文由 Alex Norcliffe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

可以使链接填充整个 div，从而使 div 具有可点击的外观。

CSS：

 #my-div {
    background-color: #f00;
    width: 200px;
    height: 200px;
}
a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

HTML:

 <div id="my-div">
    <a href="#" class="fill-div"></a>
</div>

原文由 Mario 发布，翻译遵循 CC BY-SA 3.0 许可协议