Html 如何将“a href”链接添加到“div”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11056901/
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 To Add An "a href" Link To A "div"?
提问by Wardenclyffe
I need to know how to add an a href link to a div? Do you put the a href tag arounf the entire "buttonOne" div? Or should it be around or inside the "linkedinB" div?
我需要知道如何向 div 添加一个 href 链接？您是否将 a href 标签放在整个“buttonOne”div 中？或者它应该在“linkedinB”div周围或内部？
Here's my HTML:
这是我的 HTML：
<div id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div>
回答by Philip Kirkbride
Can't you surround it with an a tag?
你不能用a标签包围它吗？
<a href="#"><div id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div></a>
回答by Oded
In this case, it doesn't matter as there is no content between the two divs.
在这种情况下，这无关紧要，因为两个divs之间没有内容。
Either one will get the browser to scroll down to it.
任何一个都会让浏览器向下滚动到它。
The aelement will look like:
该a元素将如下所示：
<a href="mypageName.html#buttonOne">buttonOne</a>
Or:
或者：
<a href="mypageName.html#linkedinB">linkedinB</a>
回答by Contributor
try to implement with javascript this:
尝试用 javascript 实现：
<div id="mydiv" onclick="myhref('http://web.com');" >some stuff </div>
<script type="text/javascript">
function myhref(web){
window.location.href = web;}
</script>
回答by Carlo Palinckx
Try creating a class named overlayand apply the following css to it:
尝试创建一个名为的类并将overlay以下 css 应用到它：
a.overlay { width: 100%; height:100%; position: absolute; }
Make sure it is placed in a positioned element.
确保它被放置在一个定位元素中。
Now simply place an <a>tag with that class inside the div you want to be linkable:
现在只需<a>在要链接的 div 中放置一个带有该类的标签：
<div id="buttonOne">
<a class="overlay" href="......."></a>
<div id="linkedinB">
<img src="img/linkedinB.png" alt="never forget the alt tag" width="40" height="40"/>
</div>
</div>
PhilipK's suggestion might work but it won't validate because you can't place a block element (div) inside an inline element (a). And when your website doesn't validate the W3C Ninja's will come for you!
PhilipK 的建议可能有效，但它不会通过验证，因为您不能将块元素 ( div) 放置在内联元素 ( a) 中。当您的网站未通过验证时，W3C Ninja 会来找您！
An other advice would be to try avoiding inline styling.
另一个建议是尽量避免内联样式。
回答by Dirk de Man
I'd say:
我会说：
<a href="#"id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div>
However, it will still be a link. If you want to change your link into a button, you should rename the #buttonone to #buttonone a { your css here }.
但是，它仍然是一个链接。如果要将链接更改为按钮，则应将 #buttonone 重命名为 #buttonone a { your css here }。
回答by Faheem Ahmad
Your solutions don't seem to be working for me, I have the following code. How to put link into the last two divs.
您的解决方案似乎对我不起作用，我有以下代码。如何将链接放入最后两个 div。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<style>
/* Import */
@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400);
* {
font-family: "Quicksand", sans-serif;
font-weight: bold;
text-align: center;
text-transform: uppercase;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.025s ease;
}
/* Colors */
#ora {
background-color: #e67e22;
}
#red {
background-color: #e74c3c;
}
#orab {
background-color: white;
border: 5px solid #e67e22;
}
#redb {
background-color: white;
border: 5px solid #e74c3c;
}
/* End of Colors */
.B {
width: 240px;
height: 55px;
margin: auto;
line-height: 45px;
display: inline-block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#orab:hover {
background-color: #e67e22;
}
#redb:hover {
background-color: #e74c3c;
}
#whib:hover {
background-color: #ecf0f1;
}
/* End of Border
.invert:hover {
-webkit-filter: invert(1);
-moz-filter: invert(1);
-ms-filter: invert(1);
-o-filter: invert(1);
}
</style>
<h1>Flat and Modern Buttons</h1>
<h2>Border Stylin'</h2>
<div class="B bo" id="orab">See the movies list</div></a>
<div class="B bo" id="redb">Avail a free rental day</div>
</html>
