如何增加 <a> 标签按钮的可点击区域？

Question

我从这篇 文章 中了解到，总是使用 <a> 标签或 <button> 标签来制作按钮。现在我正在尝试使用 <a> 标签。我的问题是：有没有办法增加标签的可点击区域？假设我在 div 框中使用 <a> 。我希望整个 div 框成为一个按钮。我可以将点击区域更改为整个 div 框吗？谢谢你的帮助。

原文由 Ivan Wang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

@t1m0thy 的回答 比我的更优雅。最好听从他的建议。

此外， @aldemarcalazans 在评论中提出了很好的链接： https ://davidwalsh.name/html5-buttons。

---

原答案：

使用 <a /> 需要链接时（ 锚点 的 a ）。当你需要一个按钮时使用 <button /> 。

也就是说，如果您确实需要扩展 <a /> ，请在其上添加 CSS 属性 display: block; 。然后您将能够指定宽度和/或高度（即，就好像它是 <div /> ）。

原文由 sp00m 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

要增加文本链接的区域，您可以使用以下 css；

 a {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 2em;
  margin: -2em;
}

 <a href="">An anchor element</a>

• 显示：需要 inline-block 以便可以设置边距和填充
• 位置需要是相对的，这样……
• z-index 可用于使可点击区域位于后面任何文本的顶部。
• padding 增加了可以点击的区域
• 负边距保持周围文本的流动（注意重叠链接）

原文由 t1m0thy 发布，翻译遵循 CC BY-SA 4.0 许可协议