Как увеличить зону действия кнопки <a>тега?

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

Ответ 1

Редактировать:

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

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

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

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

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

Ответ 2

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

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

Дисплей: требуется встроенный блок, чтобы можно было задать поля и отступы
Положение должно быть относительным, чтобы...
z-index может быть использован, чтобы область кликабельности оставалась поверх любого следующего текста.
Обивка увеличивает область, на которую можно нажать
Отрицательное поле сохраняет поток окружающего текста, как и должно быть (остерегайтесь пересекающихся ссылок)

Ответ 3

Да, если вы используете 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 только после создания элемента уровня блока ссылок.

Ответ 4

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

<!doctype html>

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

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

Ответ 5

Просто создайте привязку display: block и width/height: 100%. Например:

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

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

Ответ 6

добавить 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/

Ответ 8

используйте свойство position css и установите top, right, bottom и left в Zero.. установите z-index, если необходимо, в моем случае я использовал text-indent, потому что я не хочу показывать ссылку "text", но если вы хотите показать ссылку " text ", просто не используйте text-indent

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