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

【问题标题】：How to increase the clickable area of a <a> tag button?如何增加 <a> 标签按钮的可点击区域？
【发布时间】：2012-06-20 04:00:04
【问题描述】：

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

【问题讨论】：

标签： css button html clickable

【解决方案1】：

如果您使用的是 HTML 5，即文档类型

<!doctype html>

那么你可以使用block-level links。

<a href="google.com">
  <div class="hello">
    ..
  </div>
</a>

【讨论】：

【解决方案2】：

是的，如果您使用的是 HTML5，则可以，此代码有效，否则：

<a href="#foo"><div>.......</div></a>

如果你不使用 HTML5，你可以把你的链接设为block:

<a href="#foo" id="link">Click Here</a>

CSS：

#link {
  display : block;
  width:100px;
  height:40px;
}

请注意，您只能在制作链接块级元素后应用width、height。

【讨论】：

这段代码与 HTML5 无关。 display 属性早在 HTML5 规范开始之前就已经存在于 CSS 中了。
@poncha：抱歉，最初标记错误，正在讲述这个问题：<a href="#foo"><div>.......</div></a> 例如div inside a 在 html5 中有效。
现在看起来更好了 ;) +1'd this 因为它提供了两种解决方案

【解决方案3】：

编辑：

@t1m0thy's answer 比我优雅，最好听从他的建议。

另外，@aldemarcalazans 在 cmets 中提出的不错的链接：https://davidwalsh.name/html5-buttons。

原答案：

当您需要链接时使用<a />（anchor 的a）。需要按钮时使用<button />。

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

【讨论】：

这很完美，你的回答很快就来了。你的石头！非常感谢。
如果您担心语义，t1m0thy 的答案似乎是正确的选择。见：davidwalsh.name/html5-buttons
Facebook 也使用这种方法来扩展其移动 Web 应用导航中链接的点击目标。我更喜欢这种方法，IMO 更具可读性。 "// 使链接的点击目标更大"
记得将display:block 既是<a /> 的容器，也是<a /> 的容器。那么你应该将padding 用于<a />，而不是<a /> 的容器。

【解决方案4】：

只需制作锚点display: block 和width/height: 100%。例如：

.button a {
    display: block;
    width: 100%;
    height: 100%;
}

jsFiddle：http://jsfiddle.net/4mHTa/

【讨论】：

【解决方案5】：

您可以尝试使用 display: block 或 display: inline-block。一个不错的教程可以在这里找到：http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

这是关于如何增加标签按钮的可点击区域的真正答案
这是我发现的第一个在它旁边有一个图标的食谱，谢谢。但是我不得不更改：padding: 0 2em; margin: 0 -2em; 以防止可点击区域被向下推。
我还需要设置box-sizing: content-box，它被bootstrap重置为border-box
这是所有 4 个方向的负边距？
Chrome 中似乎不需要 z-index？也许在其他浏览器中？

【解决方案7】：

将padding 添加到锚标签的CSS 类中。如果需要，请根据您想要的可点击区域分别添加padding-top、padding-bottom、...。它对我有用。

【讨论】：

【解决方案8】：

使用位置 css 属性并将顶部、右侧、底部和左侧设置为零。如果需要，设置 z-index 在我的情况下，我使用 text-indent 因为我不想显示链接“text”，但如果你想显示链接“text”，请不要使用 text-indent

display:block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -99999px;

【讨论】：

【解决方案9】：

对我来说，填充解决方案并不好，因为我在按钮上使用了边框，并且很难修改标记来为触摸区域创建覆盖。

所以我所做的是，我只是使用了 :before 伪标签，并创建了一个覆盖，这在我的情况下是完美的，因为点击事件以相同的方式传播。

button.my-button:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    top: -6px;
    left: -5px;
}

【讨论】：

【解决方案10】：

非常感谢此处提供答案的贡献者，它为我指明了正确的方向。

对于那里的 Bootstrap4 用户，这对我有用。将链接（点击目标）设置为正确的大小，以通过移动设备上的灯塔站点审核。

    <span class="small">
         <a class="d-inline position-relative p-3 m-n3" style="z-index: 1;" href="/AdvancedSearch" title="Advanced Site Search using extra optional filters">Advanced Site Search</a>
    </span>

【讨论】：

【解决方案11】：

我发现的简单方法：在 "a" 标签列表项的右侧添加 "li" 标签

<li></span><a><span id="expand1"></span></a></li>

在 CSS 文件中创建如下：

#expand1 {
 padding-left: 40px;
}

【讨论】：