我从这个帖子中学到，制作按钮始终使用<a>标签或<button>标签。 现在我正在尝试使用<a>标签。 我的问题是：有没有办法增加<a>标签的可点击区域？比如，我将<a>标签用于一个div框中，我希望整个div框成为一个按钮。我能否将点击区域更改为整个div框？ 谢谢。
16个回答
210
如果您想增加文本链接的点击区域，可以使用以下 CSS 代码：
a {
display: inline-block;
position: relative;
z-index: 1;
padding: 2em;
margin: -2em;
}<a href="">An anchor element</a>- 要设置边距和填充，需要使用Display:inline-block
- 位置需要是相对的，这样...
- 可以使用z-index让可点击区域保持在后续任何文本之上。
- 填充增加了可点击区域的大小
- 负边距使周围文本的流动保持正常（注意不要重叠链接）
- t1m0thy
6
63
@t1m0thy的回答比我的更优雅。最好遵循他的建议。
此外，评论中@aldemarcalazans提供了一个不错的链接：https://davidwalsh.name/html5-buttons。
原始回答：
当需要链接时，请使用<a />（即“anchor”的a）。当需要按钮时，请使用<button />。
话虽如此，如果您确实需要扩展<a />，请在其上添加CSS属性display: block;。这样，您就可以指定它的宽度和/或高度（就像是一个<div />一样）。
- sp00m
5
2这个完美地运作了，而且你的回答速度超快。你太棒了！非常感谢你。 - Ivan Wang
如果您担心语义问题，t1m0thy的答案似乎是正确的选择。请参见：https://davidwalsh.name/html5-buttons - aldemarcalazans
Facebook也使用这种方法来扩展其移动Web应用程序中导航链接的点击目标。在我看来，我更喜欢这种方法，更易读。"//使链接的点击目标更大" - Clifford Fajardo
记得将包含<a />的容器和<a />本身都设置为
display:block。然后你应该为<a />使用padding，而不是为<a />的容器使用。 - Jaime Montoya可能会让很多开发者不高兴，但是需要补充一点，很多开发者受限于他们的电脑配置，无法进行这个改变。如果你使用<button>，那么它在用户界面中需要看起来像一个按钮，就像<a>需要符合WCAG标准下的链接样式一样。除了结构、对比度和触摸区域之外，这是最常见的无障碍用户界面错误实现。所以请要么要求设计改变，要么找到更正确的方式来处理你的电脑配置。（我知道导航栏有点奇怪，但是总的来说，我的意思是。） - undefined
22
如果您正在使用HTML5，那么您可以这样做，否则此代码将是无效的:
<a href="#foo"><div>.......</div></a>
如果您未使用HTML5，则可以将链接设置为
block：
#link {
display: block;
width: 100px;
height: 40px;
}<a href="#foo" id="link">Click Here</a>注意在将链接块级元素化之后，你才能应用 width 和 height 属性。
- Sarfraz
16
对我来说填充方案不好用，因为我在按钮上使用了边框，并且很难修改标记来创建触摸区域的叠加层。
所以我只是使用了:before伪元素来创建一个叠加层，在我的情况下非常完美，因为点击事件以同样的方式传播。
button.my-button:before {
content: '';
position: absolute;
width: 26px;
height: 26px;
top: -6px;
left: -5px;
cursor: pointer;
}<button class="my-button">A button</button>注意: 确保父元素具有 position:relative 属性。
- Inc33
4
1这是最佳解决方案，值得检查。 如果有任何重叠触摸区域的情况，您还可以添加
z-index。 - Arthur Khazbs1这个答案对我有用。但是我不得不在父元素中添加
position: relative;，否则 ::before 伪元素会随着布局的移动而改变位置（页面上有动画）。 - jimasun是的，这是预期的行为。我在我的答案中添加了一条注释。 - Inc33
或者你可以将宽度和高度设置为 100%。这对我有效。谢谢！
button.my-button:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
}
而且 .button 的位置应该是相对的。 - Sam
10
只需要将锚点设置为 display: block 和 width/height: 100%。例如：
.button a {
display: block;
width: 100%;
height: 100%;
}
jsFiddle：http://jsfiddle.net/4mHTa/
- Christian
9
如果您正在使用HTML 5，即文档类型
<!doctype html>
如果您想在 HTML 中创建块级链接，则可以使用块级链接。
<a href="google.com">
<div class="hello">
..
</div>
</a>
- Alex
9
将 padding 添加到锚点标签的 CSS 类中。如果需要，根据所需的可点击区域单独添加 padding-top、padding-bottom 等。这对我很有效。
- Ramesh
4
你可以尝试使用display: block或display: inline-block。这里有一个不错的教程：http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/。
- DZittersteyn
3
提供更多的左侧、底部、右侧和顶部空间。这样可以增加锚点标签的可点击/可触摸区域，方便点击...
记住：这也可能会产生负面影响。
a {
text-decoration: none;
font-size: 12px;
min-width: 10px !important;
padding: 0px 1px !important;
margin-right: 3px;
position: relative;
z-index: 50;
}
a:before {
position: absolute;
content: '';
top: -10px;
right: -10px;
left: -10px;
bottom: -10px;
z-index: 40;
}<a href="">An anchor</a>- Zia Khan
1
1哇！太棒了！谢谢 :) - Renan Coelho
0
我发现最干净的解决方案是使用::before，因为我不想改变并可能使HTML复杂化。这里有一个例子：
// the parent element
.chevron {
position: relative;
width: 36px;
height: 36px;
border-radius: 18px;
cursor: pointer;
}
// the background covers only 36px as of the parent
.chevron:hover {
background: #F1FBFE;
}
// the invisible "touch area"
.chevron::before {
position: absolute;
width: 48px;
height: 48px;
top: -6px; // half of parent's height
content: '';
}
其他属性，如left、cursor、z-index并不是必需的。特别是cursor会从父元素继承，因为pseudo-element位于父元素下方（即使它延伸得更远）。
下面的图片显示了鼠标尚未进入父元素，但仍会触发:hover（添加background）和cursor: pointer。
- jimasun
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
padding: 0 2em; margin: 0 -2em;以防止可点击区域被向下推。 - Gringo Suavebox-sizing: content-box，因为它被 Bootstrap 重置为border-box。 - Cyril Durand