图像上的 HTML 链接仅显示在该图像下方

Question

我想在图像上放置一个链接。我也在其他图片上做了，它工作正常。就在该图像上，链接只能在实际图片下方单击。

这是我的代码：

.HTML：

<a href="admin.php">
<img src="steak.png" alt="AdminSteak" class="wrapSteak">
</a>

和 CSS：

.wrapSteak {
position: relative;
top: 15px;
left: 45px;
height: 50px;
width: 25px;
}

有人知道为什么链接不直接在图像上的解决方案吗？

提前谢谢。

Answer 1

将 wrapSteak 分配给父元素a并使其inline-block.

.wrapSteak {
position: relative;
top: 15px;
left: 45px;
display: inline-block;
height: 50px;
width: 25px;
}

<a href="admin.php" class="wrapSteak">
<img src="steak.png" alt="AdminSteak">
</a>

这应该有效。 制作锚标记inline-block包含图像标签，如果应用相对于image标签的位置anchor标签会保留到其原始位置，唯一的图像将被移动。