HTML-如何使<a>边框可点击？</a>

Question

Say I have a <a class="myclass" href="foo.htm">Click Here</a> and in css something like this:

.myclass
{
border: 2px solid #000;
padding: 1em;
}

so the <a> looks like a button but it only operates when clicked on the text, not in the whole box. How can I make so that the box also "catches" onClick?

Answer 1

Block will not work well unless you float the element and give it a fixed width. I think "inline-block" would work better.

.myclass{
    display: inline-block;
    border: 2px solid #000;
    padding: 1em;
}

You can see it in action here: http://jsfiddle.net/2tmzL/

Browser support for inline-block is pretty good: http://caniuse.com/inline-block

Answer 2

将锚定标签包裹在另一个容器元素周围

<a class=".." href=".."><div>Click here</div><a>

Answer 3

< a > is an inline , you have to transform it to a block, try this

.myclass:
{
  display:block;
  border: 2px solid #000;
  padding: 1em;
}

Answer 4

您需要为元素设置css属性display：block或inline-block（取决于大小写...）。

Answer 5

I seem to be able to click the entire link. Make sure you remove : after .myclass. Also if it's still not working you may like to try adding display:block;

Alternatively in html5 you can wrap the a tag around a block element. This will work in older html though it's not correct.

.myclass
{
    border: 2px solid #000;
    padding: 1em;
    display:block;
}

Answer 6

The issue is that a's are inline elements, and padding doesn't work the way we expect with inline elements. Change the a's to a block level element, and everything should work as you expect (note the removal of the ":" in the CSS declaration, that shouldn't be there):

.myclass {
   display: block;
   border: 2px solid #000;
   padding: 1em;
}