Comment augmenter la zone cliquable d'un bouton de balise <a> ?

Question

J'ai appris de cela post qui utilisent toujours <a> ou <button> pour créer un bouton. J'essaie maintenant d'utiliser <a> étiquette. Ma question est la suivante : existe-t-il un moyen d'augmenter la zone cliquable de la balise ? Disons que j'utilise <a> dans une boîte div. Je veux que l'ensemble du cadre div devienne un bouton. Puis-je changer la zone de clic en un champ div entier ? Merci pour votre aide.

Answer 1

Pour augmenter la surface d'un lien textuel, vous pouvez utiliser le code css suivant ;

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

• Affichage : inline-block est nécessaire pour pouvoir définir les marges et le rembourrage.
• La position doit être relative afin que...
• z-index peut être utilisé pour que la zone cliquable reste au-dessus de tout texte qui suit.
• Le rembourrage augmente la surface sur laquelle on peut cliquer.
• La marge négative permet de conserver le flux du texte environnant tel qu'il doit être (attention aux liens qui se chevauchent).

Answer 2

Edit :

La réponse de @t1m0thy est plus élégant que le mien, mieux vaut suivre ses conseils.

Par ailleurs, le lien proposé par @aldemarcalazans dans les commentaires : https://davidwalsh.name/html5-buttons .

---

Réponse originale :

Utilice <a /> lorsque vous avez besoin d'un lien (le a de ancre ). Utilisez <button /> quand vous avez besoin d'un bouton.

Cela dit, si vous avez vraiment besoin d'étendre une <a /> ajoutez l'attribut CSS display: block; sur elle. Vous pourrez alors spécifier une largeur et/ou une hauteur (c'est-à-dire comme s'il s'agissait d'une <div /> ).

Answer 3

Oui, vous pouvez le faire si vous utilisez HTML5 ce code est valide pas autrement :

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

Si vous n'utilisez pas HTML5, vous pouvez faire en sorte que votre lien block :

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

CSS :

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

Notez que vous pouvez appliquer width , height seulement après avoir fait votre lien au niveau de l'élément de bloc.

Answer 4

Il suffit de faire l'ancre display: block y width/height: 100% . Eg :

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

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

Answer 5

Ajouter padding à la classe CSS de la balise d'ancrage. Si nécessaire, ajoutez padding-top , padding-bottom ... individuellement en fonction de la zone cliquable que vous souhaitez. Cela a fonctionné pour moi.