如何增加锚点或按钮元素的可点击面积？

小开

If you're using HTML 5, i.e. the doctype

<!doctype html>

then you can just use block-level links.

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

小开

Yes you can if you are using HTML5, this code is valid not otherwise:

<a href="#foo"><div>.......</div></a>

If you are not using HTML5, you can make your link block:

#link {
display: block;
width: 100px;
height: 40px;
}

<a href="#foo" id="link">Click Here</a>

Notice that you can apply width, height only after making your link block level element.

小开

最佳答案

@t1m0thy's answer is more elegant than mine. It's better to follow his advice.

Also, nice link proposed by @aldemarcalazans in the comments: https://davidwalsh.name/html5-buttons.

Original answer:

Use <a /> when you need a link (the a of anchor). Use <button /> when you need 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 />).

小开

Just make the anchor display: block and width/height: 100%. Eg:

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

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

小开

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/

小开

To increase the area of a text link you can use the following css;

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

<a href="">An anchor element</a>

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)

小开

add padding to 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.

小开

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

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

小开

For me the padding solution wasn't good, as I was using border on the button, and would've been hard to modify the markup to create an overlay for the touch area.

So I just used the :before pseudo element and created an overlay, which was perfect in my case, as the click event propagated the same way.

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

<button class="my-button">A button</button>

小开

Big thanks to the contributors to the answers here, it pointed me in the right direction.

For the Bootstrap4 users out there, this worked for me. Sets the a link (tap target) to correct size to pass the Lighthouse Site Audit on mobiles.

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

小开

the simple way I found out: add a "li" tag on the right side of an "a" tag List item

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

On CSS file create this below:

#expand1 {
padding-left: 40px;
}

小开

Provide more left,Bottom,right and top space. This will have more clickable/touchable area of anchor tag for easy click...

Remember: this may have negative effects as well

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>