如何将整个div设为链接？

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 href="foo.html"><div class="xyz"></div></a>

适用于浏览器,即使它违反了当前的HTML规范.根据HTML5草案允许.

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

目前还不清楚你所说的"div中的所有内容都在css中",但我想这意味着HTML标记中的内容真的是空的,你就像CSS一样

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

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

Answer 3

一个包裹<a>周围是不行的(除非你设置<div>到display:inline-block;或display:block;到<a>),因为DIV是SA块级元素和<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 4

html:

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

css:

.xyz{
  display: block;
}

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