Html 如何使整个 div 成为链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9228730/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make entire div a link?
提问by GeekedOut
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 class="xyz"></div>，该 div 中的所有内容都在 css 中。我如何将那个 div 变成一个链接？我尝试将 a 标签包裹在它周围，但这似乎不起作用。
Thanks!!
谢谢！！
回答by Barry Chapman
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>
回答by Jukka K. Korpela
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?
然后整个块是可点击的，内容文本看起来像那里的链接文本。这不是你所期望的吗？
回答by ramsesoriginal
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.
一个包裹<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>
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>并选择 a <span>，或者只是普通的<a>. 如果您真的想让 div 可点击，您可以附加一个带有 onclick 处理程序的 javascript 重定向，例如：
document.getElementById("myId").setAttribute('onclick', 'location.href = "url"');
but I would recommend against that.
但我建议不要这样做。
回答by laymanje
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 一样的块级元素。
