我有一个<div>块与一些花哨的视觉内容,我不想改变。我想让它成为一个可点击的链接。
我正在寻找类似于<a href="…"><div>…</div></a>,但这是有效的XHTML 1.1。
我有一个<div>块与一些花哨的视觉内容,我不想改变。我想让它成为一个可点击的链接。
我正在寻找类似于<a href="…"><div>…</div></a>,但这是有效的XHTML 1.1。
当前回答
苏联的回答对我来说是不够的。我必须使用
a { display: inline-flex; }
要删除基线工件,当只使用a。
其他回答
您还可以尝试包装一个锚,然后将其高度和宽度与其父相同。这对我来说非常合适。
<div id="css_ID">
<a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>
这个选项不需要一个空的gif,就像被点赞最多的答案一样:
HTML:
<div class="feature">
<a href="http://www.example.com"></a>
</div>
CSS:
div.feature {
position: relative;
}
div.feature a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: #FFF; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
如http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/所提议
这是最简单的方法。
比如说,这是我想要的可点击的div块:
<div class="inner_headL"></div>
所以输入href,如下所示:
<a href="#">
<div class="inner_headL"></div>
</a>
只需将div块视为普通的html元素,并启用通常的a href标记。 至少在FF上是有效的。
如果你可以使用bootstrap,一个简单的解决方案是使用bootstrap .stretch -link。
https://getbootstrap.com/docs/4.3/utilities/stretched-link/
示例代码
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
需要一点javascript。 但是,你的div是可点击的。
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>