如何使整个 div 成为链接？ [复制]答案

【问题标题】：How do I make entire div a link? [duplicate]如何使整个 div 成为链接？ [复制]
【发布时间】：2014-03-25 17:59:12
【问题描述】：

我有一个像 <div class="xyz"></div> 这样的 div，该 div 中的所有内容都在 css 中。如何使该 div 成为链接？我尝试将 a 标签包裹在它周围，但这似乎不起作用。

谢谢！！

【问题讨论】：

你是如何用a标签包装它的？

标签： html css

【解决方案1】：

您需要将display: block; 属性分配给包装锚。否则将无法正确包装。

<a style="display:block" href="http://justinbieber.com">
  <div class="xyz">My div contents</div>
</a>

【讨论】：

这是非法的，它不会通过验证。
他没有要求它通过验证，他问的是如何让anchor包裹一个div。
+1 获取绝佳且绝对相关的链接
这解决了当右键单击 span 上的任意位置时出现“在新选项卡中打开”，而不仅仅是我的菜单的链接文本。
HTML 5 不再是这种情况 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). This example shows how this can be used to make an entire advertising block into a link w3.org/TR/html5/text-level-semantics.html#the-a-element

【解决方案2】：

使用

<a href="foo.html"><div class="xyz"></div></a>

可以在浏览器中使用，即使它违反了当前的 HTML 规范。根据 HTML5 草案是允许的。

当你说它不起作用时，你应该准确地解释你做了什么（包括 jsfiddle 代码是个好主意），你期望什么，以及行为与你的期望有何不同。

不清楚您所说的“该 div 中的所有内容都在 css 中”是什么意思，但我想这意味着 HTML 标记中的内容实际上是空的，并且您有类似 CSS 的

.xyz:before { content: "Hello world"; }

然后整个块都是可点击的，内容文本看起来像那里的链接文本。这不正是你所期待的吗？

【讨论】：

【解决方案3】：

包裹<a> 是行不通的（除非您将<div> 设置为display:inline-block; 或display:block; 设置为<a>），因为div 是块级元素，而<a> 是不是。

<a href="http://www.example.com" style="display:block;">
   <div>
       content
   </div>
</a>

<a href="http://www.example.com">
   <div style="display:inline-block;">
       content
   </div>
</a>

<a href="http://www.example.com">
   <span>
       content
   </span >
</a>

<a href="http://www.example.com">
   content
</a>

但也许您应该跳过<div> 并选择<span>，或者只是简单的<a>。如果你真的想让 div 可点击，你可以附加一个带有 onclick 处理程序的 javascript 重定向，比如：

document.getElementById("myId").setAttribute('onclick', 'location.href = "url"');

但我建议不要这样做。

【讨论】：

在我的情况下 div 元素必须是 inline-block 并且可以完美运行。将鼠标悬停在孔 div 上时，div 内的所有
元素都将获得基本的链接行为。
JS 对我来说效果很好。我还添加了 style="cursor:pointer;"当用户将鼠标悬停在容器 div 上时，使其看起来像一个链接。

【解决方案4】：

html:

 <a class="xyz">your content</a>

CSS：

.xyz{
  display: block;
}

这将使锚点成为像 div 一样的块级元素。

【讨论】：