如何使整个 div 成为超链接答案

【问题标题】：How to make a entire div a hyperlink如何使整个 div 成为超链接
【发布时间】：2014-07-22 15:01:14
【问题描述】：

我有一个包含背景颜色和其他样式的 div，里面有一些包含超链接的文本。我如何向整个 div 添加一个超链接，以便当一个人点击选定的 div 时，附加到 id 的任何内容都会被执行：

    <div class="className" style="background-color:green;" id="IDName" >
    <a href="#" style="font-weight: bolder;"> Your Text goes here </a>
</div>

【问题讨论】：

所以基本上点击div，执行一个函数？或者点击 div 并导航到一个新的 url？
使用 HTML5 文档类型，您可以将 div（或大多数块级元素）包装在锚点中。最简单的方法。

标签： html css asp.net

【解决方案1】：

您必须在a 标签上添加display:block。默认情况下a 是内联元素，因此通过提供display:block，它将表现为块级元素。

检查 DEMO。

a{display:block;}

【讨论】：

这很好用，但我只需添加 height:100% 以确保它也垂直填充 div。 jsbin.com/zodarimi/2/edit
要使文本水平居中，请使用.className a { text-align:center}
@NickR 我试过做 .className a { text-align:center} 但它不起作用。有什么办法可以通过包含 style="text-align:center" 在代码中做到这一点？
因为这个问题现在已经很老了，并且被 OP 接受了，但仍然有人对我的问题投了反对票。 MOderator 应该有一些系统可以捕获谁放弃投票。现在很难追踪谁放弃了投票......

【解决方案2】：

可以在div上设置onclick

<div class="className" style="background-color:green;" id="IDName" onclick="location.href=#" >

【讨论】：

【解决方案3】：

<a href="#" > <div>  This is the div wrapped by an anchor. </div> </a>

【讨论】：

这不是有效的 HTML，它可能会导致旧浏览器出现问题。使用 display: block 模拟 div 比使用内联 a 标记包装块级 div 更好。
我知道你的意思，但它实际上是有效的 HTML5，并且在旧浏览器中“足够好”。