Question

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

谢谢！

Answer 1

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

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

Answer 2

将<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"');

但我建议反对。

Answer 3

html：

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

css：

.xyz{
  display: block;
}

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

Answer 4

使用

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

适用于浏览器，即使它违反了当前的HTML规范。根据HTML5草案允许这样做。

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

目前还不清楚你的意思是“该div中的所有内容都在css中”，但我认为这意味着HTML标记中的内容真的是空的，你有像

这样的CSS

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

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

如何将整个div设为链接？

4 个答案: