图片上的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标签回到其原始位置，唯一的图片将被移动。