Как увеличить кликабельную область кнопки тега?

я узнал из этой в должности что всегда используйте <a> теги или <button> теги, чтобы сделать кнопку. Теперь я пытаюсь использовать <a> тег. Мой вопрос: есть ли способ увеличить область кликабельности тега? Скажем, я использую <a> в коробке div. Я хочу, чтобы вся коробка div стала кнопкой. Можно ли изменить область щелчка на весь div-блок? Спасибо за помощь.

42
button clickable css html

7 ответов

Edit:

@t1m0thy это более элегантно, чем мой, лучше следовать его советам.

кроме того, хорошая ссылка, предложенная @aldemarcalazans в комментариях:https://davidwalsh.name/html5-buttons.

оригинальный ответ:

использовать <a /> когда вам нужна ссылка (a of якорь). Использовать <button /> когда вам нужно кнопка.

что сказал, Если вам действительно нужно расширить <a />, добавьте атрибут CSS display: block; на нем. Вы сможете задать ширину и/или высоту (т. е. как если бы это был <div />).

44

для увеличения площади текстовой ссылки можно использовать следующий css;

a {     
   display: inline-block;     
   position: relative;    
   z-index: 1;     
   padding: 2em;     
   margin: -2em; 
}
  • дисплей: встроенный блок требуется, чтобы поля и отступы можно было установить
  • положение должно быть относительным, так что...
  • z-index можно использовать, чтобы сделать кликабельную область оставаться поверх любого текста, который следует.
  • прокладка увеличивает область, которую можно щелкнуть
  • отрицательное поле сохраняет поток окружающего текста, как и должно быть (остерегайтесь более притирки ссылки)
74

Да, вы можете если вы используете в HTML5 этот код действительный не иначе:

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

если вы не используете HTML5, вы можете сделать ссылку block:

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

CSS:

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

обратите внимание, что вы можете применить width, height только после создания элемента уровня блока ссылок.

16

просто сделайте якорь display: block и width/height: 100%. Например:

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

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

9

Если вы используете HTML 5, то есть doctype

<!doctype html>

затем вы можете просто использовать ссылки на уровне блоков.

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

добавить padding в класс CSS тега привязки. При необходимости добавьте padding-top, padding-bottom,... индивидуально в соответствии с кликабельной областью, которую вы хотите. У меня получилось.

7

вы можете попробовать использовать display: block или display: inline-block. Хороший учебник можно найти здесь: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

3