html - как сделать <a> clickable на границе?

Question

Скажем, у меня есть <a class="myclass" href="foo.htm">Click Here</a> и в CSS что-то вроде этого:

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

так <a> выглядит как кнопка, но она работает только при нажатии на текст, а не во всей коробке. Как я могу сделать так, чтобы ящик также «ловил» onClick?

Answer 1

Wrap якорь тег вокруг другого элемента контейнера

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

Answer 2

< а> является строковым, вы должны преобразовать его в блок, попробуйте это

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

Answer 3

Вы должны установить CSS отображение свойств: блок или встроенный блок (в зависимости от случая ...) для вашего элемента.

Answer 4

Кажется, я могу щелкнуть по всей ссылке. Убедитесь, что вы удалили: после .myclass. Кроме того, если он все еще не работает, вы можете попробовать добавить display: block;

В качестве альтернативы в html5 вы можете обернуть тег вокруг элемента блока. Это будет работать в более раннем html, хотя это неверно.

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

Answer 5

Проблема в том, что a является встроенными элементами, а отступы не работают так, как мы ожидаем, с встроенными элементами. Изменение элементов а к элементу уровня блока, и все должно работать, как вы ожидаете (обратите внимание на удаление «:» в декларации CSS, что там не должно быть):

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

Answer 6

Блок не будет работать хорошо если вы не плаваете элемент и не фиксируете его ширину. Я думаю, что «встроенный блок» будет работать лучше.

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

Вы можете увидеть его в действии здесь: поддержка http://jsfiddle.net/2tmzL/

Browser для инлайн-блока довольно хорошо: http://caniuse.com/inline-block