我见过两种方法可以将链接延伸到卡片/容器/div/任何东西上,使整个东西都可以点击.
第一个选项将<a>
标记定位为绝对元素.
第二个选项让<a>
保持不变,并在里面放置一个绝对span
标签——导致a
inflating 并填满容器.
有没有一个真正的原因导致一个超过另一个?
.card {
height: 100px;
background: green;
position: relative;
margin-bottom: 50px;
}
.absolute-a, .absolute-span {
padding: 10px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="card">
<a href="#" class="absolute-a">
Using absolute on anchor
</a>
</div>
<div class="card">
<a href="#">
<span class="absolute-span">
Using absolute span
</span>
</a>
</div>