我需要知道如何将a href链接添加到一个div?你应该把a href标签放在整个"buttonOne" div周围吗?还是它应该在"linkedinB" div内部或外部?
这是我的HTML:
<div id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div>
我需要知道如何将a href链接添加到一个div?你应该把a href标签放在整个"buttonOne" div周围吗?还是它应该在"linkedinB" div内部或外部?
这是我的HTML:
<div id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div>
你不能用标签将其包围起来吗?
<a href="#"><div id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div></a>
<a>
标签内使用<div>
是正确的。请查看上面@zhirzh提供的更新页面。 - meles<a>
标签包围下,几乎不可能为<div>
设置样式。 - IPSDSILVA尝试使用JavaScript实现以下内容:
<div id="mydiv" onclick="myhref('http://web.com');" >some stuff </div>
<script type="text/javascript">
function myhref(web){
window.location.href = web;}
</script>
<a href="mypageName.html#buttonOne">buttonOne</a>
或者:
<a href="mypageName.html#linkedinB">linkedinB</a>
overlay
的类,并将以下 CSS 应用于它:a.overlay { width: 100%; height:100%; position: absolute; }
请确保它位于已定位的元素中。
现在只需在您想要链接的 div 中放置一个带有该 class 的 <a>
标签:
<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的建议可能有效,但它不会通过验证,因为您不能将块元素(div
)放在内联元素(a
)中。当您的网站无法验证时,W3C Ninja会找上门来!
另一个建议是尝试避免内联样式。
我会说:
<a href="#"id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div>
然而,它仍将是一个链接。如果您想将您的链接更改为按钮,您应该将#buttonone重命名为#buttonone a { your css here }。
你的解决方案对我似乎不起作用,我有以下代码。如何将链接放入最后两个 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>