Html 如何增加 <a> 标签按钮的可点击区域？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11078509/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to increase the clickable area of a <a> tag button?
提问by Ivan Wang
I have learnt from this postthat always use <a>tags or <button>tags to make button. Now I'm trying to use <a>tag. My question is: is there any way to increase the tag clickable area? Say I'm using <a>in a div box. I want the whole div box to become a button. Can I change the clicking area to the whole div box?
Thanks for you help.
我从这篇文章中了解到，总是使用<a>标签或<button>标签来制作按钮。现在我正在尝试使用<a>标签。我的问题是：有没有办法增加标签的可点击区域？假设我<a>在 div 框中使用。我想让整个 div 框变成一个按钮。我可以将点击区域更改为整个 div 框吗？谢谢你的帮助。
采纳答案by sp00m
Edit:
编辑：
@t1m0thy's answeris more elegant than mine, better follow his advices.
@t1m0thy 的回答比我的更优雅，最好听从他的建议。
Also, nice link proposed by @aldemarcalazansin the comments: https://davidwalsh.name/html5-buttons.
另外，@aldemarcalazans在评论中提出了很好的链接：https: //davidwalsh.name/html5-buttons。
Original answer:
原答案：
Use <a />when you need a link (the aof anchor). Use <button />when you need a button.
使用<a />时，你需要一个连接（一个的锚）。<button />需要按钮时使用。
That said, if you really need to expand an <a />, add the CSS attribute display: block;on it. You'll then be able to specify a width and/or a height (i.e. as if it were a <div />).
也就是说，如果您确实需要扩展<a />，请display: block;在其上添加 CSS 属性。然后，您将能够指定宽度和/或高度（即好像它是 a <div />）。
回答by t1m0thy
To increase the area of a text link you can use the following css;
要增加文本链接的区域，您可以使用以下 css；
a {
display: inline-block;
position: relative;
z-index: 1;
padding: 2em;
margin: -2em;
}
- Display: inline-block is required so that margins and padding can be set
- Position needs to be relative so that...
- z-index can be used to make the clickable area stay on top of any text that follows.
- The padding increases the area that can be clicked
- The negative margin keeps the flow of surrounding text as it should be (beware of over lapping links)
- 显示：需要 inline-block 以便可以设置边距和填充
- 位置需要是相对的，以便...
- z-index 可用于使可点击区域停留在其后的任何文本之上。
- padding 增加了可以点击的区域
- 负边距使周围文本保持原样（注意重叠链接）
回答by Sarfraz
Yes you can if you are using HTML5, this code is validnot otherwise:
是的，如果您使用的是HTML5，则此代码无效，否则：
<a href="#foo"><div>.......</div></a>
If you are not using HTML5, you can make your link block:
如果您不使用 HTML5，则可以制作链接block：
<a href="#foo" id="link">Click Here</a>
CSS:
CSS：
#link {
display : block;
width:100px;
height:40px;
}
Notice that you can apply width, heightonly after making your link block level element.
注意，你可以申请width，height只有让你的链接块级元素之后。
回答by Christian
Just make the anchor display: blockand width/height: 100%. Eg:
只需制作锚点display: block和width/height: 100%。例如：
.button a {
display: block;
width: 100%;
height: 100%;
}
jsFiddle: http://jsfiddle.net/4mHTa/
jsFiddle：http: //jsfiddle.net/4mHTa/
回答by Alex
If you're using HTML 5, i.e. the doctype
如果您使用 HTML 5，即文档类型
<!doctype html>
then you can just use block-level links.
那么你可以只使用块级链接。
<a href="google.com">
<div class="hello">
..
</div>
</a>
回答by Ramesh
add paddingto the CSS class of anchor tag. If required, add padding-top, padding-bottom,... individually according to the clickable area you want. It worked for me.
添加padding到锚标签的CSS类。如果需要，根据您想要的可点击区域单独添加padding-top, padding-bottom,... 。它对我有用。
回答by DZittersteyn
You might try using display: block or display: inline-block. A nice tutorial can be found here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
您可以尝试使用 display: block 或 display: inline-block。一个不错的教程可以在这里找到：http: //robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
回答by Inc33
For me the padding solution wasn't good, as I was using border on the button, and would've been hard to put modify the markup to create an overlay for the touch area.
对我来说，填充解决方案并不好，因为我在按钮上使用边框，并且很难修改标记以创建触摸区域的覆盖层。
So what I did, is I just used the :before pseudo tag, and created an overlay, which was perfect in my case, as the click event propagated the same way.
所以我所做的是，我只是使用了 :before 伪标签，并创建了一个叠加层，这对我来说是完美的，因为点击事件以相同的方式传播。
button.my-button:before {
content: '';
position: absolute;
width: 26px;
height: 26px;
top: -6px;
left: -5px;
}
回答by Umer Farooq
use position css property and set top,right,bottom and left to Zero.. set z-index if needed in my case in i used text-indent because i dont want to show link "text" but if you want to show link "text" , just don't use text-indent
使用位置 css 属性并将顶部、右侧、底部和左侧设置为零..如果需要在我的情况下设置 z-index 在我使用文本缩进因为我不想显示链接“文本”但如果你想显示链接“ text" ，只是不要使用文本缩进
display:block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -99999px;
