Comment augmenter la zone cliquable d'un bouton d'étiquette?
j'ai appris de ce post qui utilisent toujours <a> tags ou <button> tags pour faire bouton. Maintenant, j'essaie d'utiliser la balise <a> . Ma question est: est-il possible d'augmenter la balise zone cliquable? Disons que j'utilise <a> dans une boite de div. Je veux que toute la boîte de div devienne un bouton. Puis-je changer la zone de clic à la boîte entière de div?
Merci pour votre aide.
7 réponses
Edit:
la réponse de @t1m0thy est plus élégante que la mienne, mieux vaut suivre ses conseils.
aussi, lien de nice proposé par @aldemarcalazans dans les commentaires: https://davidwalsh.name/html5-buttons .
réponse originale:
Utiliser <a /> lorsque vous avez besoin d'un lien ( un de ancre ). Utilisez <button /> quand vous avez besoin d'un bouton.
cela dit, si vous avez vraiment besoin d'étendre un <a /> , ajouter l'attribut CSS display: block; dessus. Vous pourrez alors spécifier une largeur et/ou une hauteur (i.e. comme si c'était un <div /> ).
pour augmenter la surface d'un lien texte, vous pouvez utiliser les css suivants;
a {
display: inline-block;
position: relative;
z-index: 1;
padding: 2em;
margin: -2em;
}
- Display: inline-block est nécessaire, de sorte que les marges et le rembourrage peut être défini
- Position doit être relative, de sorte que...
- z-index peut être utilisé pour faire la zone cliquable rester sur le dessus de tout texte qui suit.
- le rembourrage augmente la surface qui peut être cliquée
- le marge négative maintient le flux de texte environnant comme il se doit (méfiez-vous des cours de rodage de liens)
Oui, vous pouvez, si vous êtes à l'aide de HTML5 , ce code est valide qui n'est pas autrement:
<a href="#foo"><div>.......</div></a>
si vous n'utilisez pas HTML5, vous pouvez faire 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 élément de niveau de bloc de lien.
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 /
si vous utilisez HTML 5, i.e. le doctype
<!doctype html>
, alors vous pouvez simplement utiliser au niveau du bloc des liens .
<a href="google.com">
<div class="hello">
..
</div>
</a>
ajouter padding à la classe CSS de l'étiquette d'ancrage. Si nécessaire, ajouter padding-top , padding-bottom ,... individuellement selon la zone cliquable que vous voulez. Il a travaillé pour moi.
, Vous pouvez essayer d'utiliser display: block ou display: inline-block. Un joli tutoriel peut être trouvé ici: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/