图片上的 HTML 链接仅显示在该图片下方答案

【问题标题】：HTML link on image only shows below that image图片上的 HTML 链接仅显示在该图片下方
【发布时间】：2019-03-06 15:03:33
【问题描述】：

我想在图片上放一个链接。我在其他图片上也这样做了，它工作正常。就在那张图片上，链接只能在实际图片下方点击。

这是我的代码：

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;
    }

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

提前致谢。

【问题讨论】：

抱歉，我无法重现该问题 - 您使用的是什么浏览器？
好吧，我复制了您的代码并用占位符替换了图像。我无法弄清楚你的问题可能是什么。它就像其他带有的图像一样工作。但我确定你正在尝试用 top 完成一些事情，留在我从你的代码中看不到的 css 中
在a 上尝试display:inline-block ... 相对于链接本身的位置，可能比其中的图像更有意义。
您的问题是由于position: relative;。尝试删除它，然后它将内联。
这是你的照片.. 还有solution。正如@misorude 所说，使用display:inline-block;

【解决方案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 标记保留到其原始位置，并且唯一的图像将被移动。

【讨论】：