Comment faire pour augmenter la zone cliquable d'un <a> bouton tag?
J'ai appris de cette post qui utilisent toujours des <a>
tags ou <button>
balises pour faire des boutons. Maintenant, je suis en train d'utiliser <a>
tag. Ma question est: est-il possible d'augmenter la balise zone cliquable? Dire que je suis en utilisant <a>
dans un div de la boîte. Je veux que l'ensemble de la div boîte à devenir un bouton. Puis-je changer la zone de sélection à l'ensemble de la div boîte?
Merci pour votre aide.
Vous devez vous connecter pour publier un commentaire.
Edit:
@t1m0thy réponse est plus élégante que la mienne, de mieux suivre ses conseils.
Aussi, lien sympa proposé par @aldemarcalazans dans les commentaires: https://davidwalsh.name/html5-buttons.
Réponse originale à cette question:
Utilisation
<a />
lorsque vous avez besoin d'un lien (un de d'ancrage). Utilisation<button />
lorsque vous avez besoin d'un bouton.Cela dit, si vous avez vraiment besoin pour développer une
<a />
, ajouter l'attribut CSSdisplay: block;
sur elle. Vous aurez alors la possibilité de spécifier une largeur et/ou hauteur (c'est à dire comme si c'était un<div />
).Pour augmenter la zone de texte lien, vous pouvez utiliser le code css suivant;
padding: 0 2em; margin: 0 -2em;
pour éviter la zone cliquable d'être poussé vers le bas.box-sizing: content-box
qui a été réinitialisé àborder-box
par bootstrapOui, vous pouvez, si vous êtes en utilisant HTML5, ce code est valide pas autrement:
Si vous n'êtes pas à l'aide de HTML5, vous pouvez faire de votre lien
block
:CSS:
Notez que vous pouvez appliquer
width
,height
seulement après avoir fait votre lien au niveau du bloc de l'élément.display
propriété a existé dans le CSS longtemps avant de HTML5 spec a été commencé.<a href="#foo"><div>.......</div></a>
par exemplediv
à l'intérieur dea
est valide en html5.Si vous êtes en utilisant le HTML 5, c'est à dire le doctype
vous pouvez simplement utiliser au niveau du bloc des liens.
Juste faire le point d'ancrage
display: block
etwidth/height: 100%
. Par exemple:jsFiddle: http://jsfiddle.net/4mHTa/
ajouter
padding
à la classe CSS de la balise d'ancrage. Si nécessaire, ajoutez de lapadding-top
,padding-bottom
,... individuellement en fonction de la zone cliquable vous le souhaitez. Il a travaillé pour moi.Vous pouvez essayer en utilisant display: block ou display: inline-block. Un bon tutoriel peut être trouvé ici: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
utiliser la propriété css position et l'ensemble de haut,droite,bas et gauche à Zéro.. set z-index si nécessaire
dans mon cas j'ai utilisé text-indent parce que je ne veux pas afficher le lien "texte", mais si vous voulez montrer le lien "texte" , il suffit de ne pas utiliser le texte-tiret