如何增加 <a> 标签按钮的可点击区域？
Posted
技术标签:
【中文标题】如何增加 <a> 标签按钮的可点击区域？【英文标题】：How to increase the clickable area of a <a> tag button? 【发布时间】：2012-06-20 04:00:04 【问题描述】：我从这个post 学到了总是使用<a> 标签或<button> 标签来制作按钮。现在我正在尝试使用<a> 标签。我的问题是：有什么办法可以增加标签的可点击区域？假设我在 div 框中使用<a>。我希望整个 div 框成为一个按钮。我可以将点击区域更改为整个 div 框吗？
谢谢你的帮助。
【问题讨论】：
【参考方案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;
【讨论】：
这是关于如何增加标签按钮的可点击区域的真正答案 这是我发现的第一个在它旁边有一个图标的食谱，谢谢。但是我不得不更改：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;
【讨论】：
以上是关于如何增加 <a> 标签按钮的可点击区域？的主要内容，如果未能解决你的问题，请参考以下文章