如何将整个div设为链接？ [重复]

This question already has an answer here:

这个问题在这里已有答案：

Make a div into a link 24 answers
将div设为24个答案

I have a div like this <div class="xyz"></div> and all the content in that div is in the css. How do I make that div into a link? I tried wrapping the a tag around it, but that didn't seem to work.

我有一个这样的div

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

Thanks!!

谢谢！！

4 个解决方案

#1

You need to assign display: block; property to the wrapping anchor. Otherwise it won't wrap correctly.

你需要指定display：block;包裹锚的属性。否则它将无法正确包裹。

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

#2

Wrapping a <a> around won't work (unless you set the <div> to display:inline-block; or display:block; to the <a>) because the div is s a block-level element and the <a> is not.

包装将无法工作（除非您将

设置为display：inline-block;或display：block;到），因为div是块级元素和不是。

<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>

But maybe you should skip the <div> and choose a <span> instead, or just the plain <a>. And if you really want to make the div clickable, you could attach a javascript redirect with a onclick handler, somethign like:

但也许您应该跳过

并选择，或者只选择简单的。如果你真的想让div可点击，你可以附加一个带有onclick处理程序的javascript重定向，有些像：

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

but I would recommend against that.

但我会建议不要这样做。

#3

Using

运用

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

works in browsers, even though it violates current HTML specifications. It is permitted according to HTML5 drafts.

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

When you say that it does not work, you should explain exactly what you did (including jsfiddle code is a good idea), what you expected, and how the behavior different from your expectations.

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

It is unclear what you mean by “all the content in that div is in the css”, but I suppose it means that the content is really empty in HTML markup and you have CSS like

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

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

The entire block is then clickable, with the content text looking like link text there. Isn’t this what you expected?

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

#4

the html:

html：

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

the css:

css：

.xyz{
  display: block;
}

This will make the anchor be a block level element like a div.

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

#1