html - 如何摆脱链接图像下的这个小链接栏？

Question

我的图片下面有一个不可见的链接栏，这是一个链接。有什么办法可以让这个栏消失或不可选择/不可点击？

谢谢！

标签： htmlcsshyperlink

Answer 1

你能检查下面的代码吗？希望它对你有用。出现此问题是因为<a>标记是内联元素。您不需要为<a>标签添加样式。

您可以比较以下示例（有和没有display属性）。

.link-block {
  display: inline-flex;
}

<a href="#" class="link-block">
  <img src="https://via.placeholder.com/240x200" alt="placeholder">
</a>
<hr />
<a href="#" class="">
  <img src="https://via.placeholder.com/240x200" alt="placeholder">
</a>

注意：您可以根据.link-block课堂要求使用 inline-block、block、inline-flex 或 flex。