91

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

4

11 回答 11

178

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

a {     
   display: inline-block;     
   position: relative;    
   z-index: 1;     
   padding: 2em;     
   margin: -2em; 
}
  • 显示：需要 inline-block 以便可以设置边距和填充
  • 位置需要是相对的，这样......
  • z-index 可用于使可点击区域停留在随后的任何文本之上。
  • padding 增加了可点击的区域
  • 负边距保持周围文本的流动，因为它应该是（注意重叠的链接）
于 2013-12-02T11:54:07.010 回答
59

编辑：

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

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

原答案：

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

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

于 2012-06-18T07:30:23.143 回答
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只有在制作链接块级元素之后，您才能应用。

于 2012-06-18T07:29:53.787 回答
11

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

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

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

于 2012-06-18T07:31:10.483 回答
9

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

<!doctype html>

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

<a href="google.com">
  <div class="hello">
    ..
  </div>
</a>
于 2012-06-18T07:29:46.220 回答
9

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

于 2014-05-07T06:56:18.423 回答
7

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

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

button.my-button:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    top: -6px;
    left: -5px;
}
于 2020-02-26T07:39:11.123 回答
5

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

于 2012-06-18T07:34:17.683 回答
0

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

display:block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -99999px;
于 2019-06-19T11:43:14.437 回答
0

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

对于那里的 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>
于 2020-06-11T05:04:17.637 回答
0

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

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

在 CSS 文件上创建如下：

#expand1 {
 padding-left: 40px;
}
于 2020-08-13T15:14:06.267 回答