web-dev-qa-db-fra.com

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

J'ai appris de ceci post qui utilise toujours <a> balises ou <button> balises pour faire le bouton. Maintenant j'essaie d'utiliser <a> tag. Ma question est la suivante: existe-t-il un moyen d'augmenter la zone cliquable du tag? Disons que j'utilise <a> dans une boîte de dialogue. Je veux que la boîte de dialogue entière devienne un bouton. Puis-je changer la zone de clic sur la boîte entière? Merci pour ton aide.

cssbuttonhtmlclickable
55
Ivan Wang

Modifier:

La réponse de @ t1m0thy est plus élégante que la mienne, il vaut mieux suivre ses conseils.

Aussi, lien de Nice proposé par @ aldemarcalazans dans les commentaires: https://davidwalsh.name/html5-buttons .

Réponse originale:

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

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

48
sp00m

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

a {     
   display: inline-block;     
   position: relative;    
   z-index: 1;     
   padding: 2em;     
   margin: -2em; 
}
  • Affichage: inline-block est requis pour pouvoir définir les marges et le remplissage
  • La position doit être relative pour que ...
  • z-index peut être utilisé pour que la zone cliquable reste au dessus du texte qui suit.
  • Le rembourrage augmente la zone sur laquelle on peut cliquer
  • La marge négative conserve le flux du texte environnant comme il se doit (méfiez-vous des liens qui se chevauchent)
106
t1m0thy

Oui, vous pouvez utiliser HTML5, ce code est valide pas autrement:

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

Si vous n'utilisez pas HTML5, vous pouvez créer votre lien block:

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

CSS:

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

Notez que vous ne pouvez appliquer width, height qu'après avoir créé votre élément de niveau bloc de liens.

17
Sarfraz

Il suffit de faire l'ancre display: block et width/height: 100%. Par exemple:

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

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

9
Christian Varga

ajoutez padding à la classe CSS de la balise anchor. Si nécessaire, ajoutez padding-top, padding-bottom, ... individuellement en fonction de la zone cliquable souhaitée. Cela a fonctionné pour moi.

8
Ramesh

Si vous utilisez HTML 5, c’est-à-dire le doctype

<!doctype html>

alors vous pouvez simplement utiliser liens de niveau bloc .

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

Vous pouvez essayer d’utiliser display: block ou display: inline-block. Un tutoriel de Nice peut être trouvé ici: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ =

4
DZittersteyn

utilisez la propriété css de position et définissez top, right, bottom et left to Zero .. définissez z-index si nécessaire dans mon cas dans i utilisé text-indent parce que je ne veux pas montrer le lien "text" mais si vous voulez montrer le lien " text ", juste n'utilisez pas text-indent

display:block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -99999px;
0
Umer Farooq