Question

由于某些原因，您不仅可以通过单击文本来单击链接，还可以在空白处单击它。

我的朋友说我必须减小div的大小，但是我不确定他的意思。

#video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-height: 100%;
  min-width: 100%;
}

#devil,
#steam,
#youtube {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 230px;
  width: 230px;
  position: relative;
}

#steam,
#youtube {
  text-decoration: none;
  font-family: cursive;
  font-style: oblique;
}

#devil {
  border-radius: 120px;
  top: 250px;
  right: 20px;
}

#steam {
  top: 280px;
  left: 10px;
}

#youtube {
  top: 50px;
  left: 115px;
}

a:link,
a:visited {
  color: forestgreen;
}

<div>
  <img id="devil" src="img/frizzy.jpg">
</div>

<div>
  <a id="steam" href="https://steamcommunity.com/id/impenetrable" target="_blank">steam</a>
  <a id="youtube" href="https://www.youtube.com/c/ItsFrizzy" target="_blank">youtube</a>
</div>

Answer 1

您的问题可能在这里：

#devil,
#steam,
#youtube {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 230px;
  width: 230px;
  position: relative;
}

您不需要设置链接的高度或宽度，因为它们会根据文本自动设置。您可以使用诸如firefox工具之类的工具查看链接的边界块，并查看使链接有很大点击空间的原因。您甚至可以根据自己的喜好调整此处的参数。

Answer 2

在CSS中，为包含链接的元素指定height: 230px;。减小此大小以删除也会响应鼠标的空白。

根据建议，使用边框或背景色来指示元素的位置，或使用开发控制台（Chrome中的F12）查找元素的大小。

Answer 3

您应该为链接设置font-size，而不是为链接设置高度，如果这样做没有帮助将line-height设置为与font-size相同的值。

Answer 4

由于您要对锚点应用高度，因此要在其上增加高度（应将其删除）。另外，我不会为此使用绝对或相对定位，因为您不需要它。我会将您的图片和社交链接封装在自己的容器中，然后将其放置。这是我正在谈论的示例。

.container {
	margin-top: 20px;
}

#video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-height: 100%;
  min-width: 100%;
}

.social_container {
	margin: 0px auto;
	padding: 10px;
	width: 200px;
}

#steam,
#youtube {
	margin: 0px auto;
	width: 80px;
	display: inline-block;
  text-decoration: none;
  font-family: cursive;
  font-style: oblique;
	text-align: center;
}

#devil {
  border-radius: 120px;
	display: block;
  margin-left: auto;
  margin-right: auto;
  height: 230px;
  width: 230px;
  position: relative;
}

a:link,
a:visited {
  color: forestgreen;
}

<div class="container">
  <img id="devil" src="img/frizzy.jpg">
</div>

<div class="social_container">
  <a id="steam" href="https://steamcommunity.com/id/impenetrable" target="_blank">steam</a>
  <a id="youtube" href="https://www.youtube.com/c/ItsFrizzy" target="_blank">youtube</a>
</div>

如何阻止我的链接被点击？

4 个答案: