How to increase the clickable area of a tag button?

问题

I have learnt from this post that 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.

回答1:

Edit:

@t1m0thy's answer is more elegant than mine, better follow his advices.

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 />).

回答2:

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

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)

回答3:

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:

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

CSS:

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

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

回答4:

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

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

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

回答5:

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>

回答6:

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.

回答7:

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/

回答8:

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;

来源：https://stackoverflow.com/questions/11078509/how-to-increase-the-clickable-area-of-a-a-tag-button

标签

css

button

html

clickable

How to increase the clickable area of a <a> tag button?

问题