图片上的 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>

这应该有效。使 anchor 标记 inline-block 包含图像标记，如果您在 image 标记上应用位置相对，则会将 anchor 标记保留到其原始位置，并且唯一图片将被移动。