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

75

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

— 王van
source

57

编辑：

@ t1m0thy的回答比我的回答更优雅，请更好地遵循他的建议。

另外，@ aldemarcalazans在评论中建议的漂亮链接：https : //davidwalsh.name/html5-buttons。

原始答案：

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

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

— sp00m
source

1

这非常有效，您的回答来得很快。你的石头！非常感谢。

— Ivan Wang

如果您担心语义，t1m0thy的答案似乎是正确的选择。参见：davidwalsh.name/html5-buttons

— aldemarcalazans

Facebook还使用这种方法来扩展其移动Web应用程序导航中链接的点击目标。我更喜欢这种方法，IMO更具可读性。“ //使链接的点击目标更大”

— 编码器

请记住，使display:block的两个容器<a />，也是<a />。然后，您应该使用padding而<a />不是的容器<a />。

— Jaime Montoya

150

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

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

显示：需要内联块，以便可以设置边距和填充
位置需要相对，以便...
z-index可用于使可点击区域停留在随后的所有文本上方。
填充增加了可以单击的区域
负边距使周围的文字保持原样（请注意避免重叠的链接）

— t1m0thy
source

9

这是有关如何增加标签按钮可点击区域

— StefansArya

1

这是我发现的第一个配方，该配方旁边带有一个图标，谢谢。但是我必须更改：padding: 0 2em; margin: 0 -2em;防止可点击区域被按下。

— Gringo Suave

3

我还需要设置由引导程序box-sizing: content-box重置border-box的位置

— 西里尔·杜兰德

这是在所有四个方向上的负边距吗？

— PJ Brunet

在Chrome中似乎不需要z-index？也许在其他浏览器中？

— 保护者

20

是的，如果您使用的是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只有在创建链接块级别元素之后，您才能应用。

— 萨夫拉兹
source

此代码与HTML5无关。displayCSS属性早在HTML5规范开始之前就已经存在。

— 庞恰2012年

1

@poncha：对不起，错误标记首先，告诉这一点：<a href="#foo"><div>.......</div></a>如div内a是有效的HTML5。

— Sarfraz

1

现在看起来更好了；）+1了，因为它提供了两种解决方案

— poncha 2012年

10

只是做锚display: block和width/height: 100%。例如：

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

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

— 基督教
source

9

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

<!doctype html>

那么您可以只使用块级链接。

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

— 亚历克斯
source

9

添加padding到锚标记的CSS类。如果需要，请根据所需的可单击区域分别添加padding-top，，padding-bottom...。它为我工作。

— 拉梅什
source

5

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

— DZittersteyn
source

3

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

因此，我所做的是，我只使用了：before伪标记，并创建了一个叠加层，对于我来说，这是完美的，因为click事件以相同的方式传播。

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

— Inc33
source

0

使用位置css属性并将top，right，bottom和left设置为零。如果我需要，在我使用text-indent的情况下，请设置z-index，因为我不想显示链接“ text”，但是如果要显示链接“文字”，只是不要使用文字缩进

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

— 乌默·法鲁克（Umer Farooq）
source

0

非常感谢这里的答案提供者，它为我指明了正确的方向。

对于那里的Bootstrap4用户而言，这对我有用。将链接（点击目标）设置为正确大小，以通过手机上的Lighthouse Site Audit。

    <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>

— 用户名
source

0

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

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

在CSS文件上，创建以下代码：

#expand1 {
 padding-left: 40px;
}

— 雷纳尔多·霍兰达
source