Html 整个div作为链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4677622/
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
Entire div as a link?
提问by Latox
I want to use an entire div as a link.. without the use of "onclick"
我想使用整个 div 作为链接.. 不使用 "onclick"
Is this possible with a simple href?
这可以用一个简单的href吗？
Thanks
谢谢
回答by Yi Jiang
No, divelements cannot have the hrefattribute, nor will they act like links. You can use the following in HTML5:
不，div元素不能有href属性，它们也不会像链接一样。您可以在 HTML5 中使用以下内容：
<a href="#"><div></div></a>
However, not all current generation browsers (notably Firefox 3.6) supports this. The other alternative is to add a absolutely positioned aelement that has 100% width and height to the div:
但是，并非所有当前的浏览器（尤其是 Firefox 3.6）都支持这一点。另一种选择是向 中添加一个a具有 100% 宽度和高度的绝对定位元素div：
div a {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
This is valid HTML4, but it won't work on older versions of IE, of course. Otherwise should accomplish what you want. See: http://www.jsfiddle.net/uRh7j/
这是有效的 HTML4，但它当然不适用于旧版本的 IE。否则应该完成你想要的。见：http: //www.jsfiddle.net/uRh7j/
回答by oezi
you can't. but you could use an <a>with style="display:block", wich should behave exactly like a <div>, to replace your <div>
你不能。但是你可以使用<a>with style="display:block"，它的行为应该与 a 完全一样<div>，来替换你的<div>
回答by Will
simple answer is no, you can use onclickwith css cursor:pointerto get the same functionality, though.
简单的答案是否定的，不过您可以使用onclickcsscursor:pointer来获得相同的功能。
回答by OmnipotentEntity
Per the HTML spec (HTML 4.01, Draft 5 and XHTML 1,1.1) an anchor tag <a>cannot enclose a <div>tag.
根据 HTML 规范（HTML 4.01、Draft 5 和 XHTML 1,1.1），锚标记<a>不能包含<div>标记。
回答by daniel
Wrap an anchor around it.
在它周围缠绕一个锚。
<a href="#"><div></div></a>
回答by thedev
I do not think this is possible without the use of onclick event.You can use display:block;for displaying the link as a div but nothing else.
如果不使用 onclick 事件，我认为这是不可能的。您可以display:block;用于将链接显示为 div，但仅此而已。
回答by Nazrul Muhaimin
why not you use javascript framework such as jquery, let the div has no onclick event but declare an event in jquery, such this:
为什么不使用jquery等javascript框架，让div没有onclick事件而是在jquery中声明一个事件，例如：
<script>
$(function(){
$(".click").click(function{ alert('clicked!'); });
});
</script>
<div class="click"></div>
just my 2 cents. thanks.
只是我的 2 美分。谢谢。
回答by jamesnotjim
You can accomplish this by creating a small transparent PNG (say, 10px * 10px) and using CSS to set the width and height of the PNG to 100%. Then you can wrap the imgtag with your a hreftag.
您可以通过创建一个小的透明 PNG（例如 10px * 10px）并使用 CSS 将 PNG 的宽度和高度设置为 100% 来实现此目的。然后你可以img用你的a href标签包裹标签。
Here's the HTML:
这是 HTML：
<div id="YourHeader">
<a href="http://example.com"><img src="/path/to/header10x10.png" /></a>
</div>
Here's the CSS:
这是CSS：
#YourHeader img {
width: 100%;
height: 100%;
}
This is especially handy if #YourHeaderis an empty divwhose only purpose is to display a header image via its background-imageattribute.
如果#YourHeader是空的，div其唯一目的是通过其background-image属性显示标题图像，则这特别方便。
