Faire de la zone cliquable de liens en ligne plus sans affecter la mise en page
Je suis à la recherche pour faire de la zone cliquable de liens plus gros qu'ils ne le sont réellement pour l'accessibilité, car pour les utilisateurs, il peut être difficile de les frapper. Environ 1,5 x la taille peut être approprié. Ce sont des liens en texte normal, donc je ne peux pas vraiment les faire grossir, ce qui serait gâcher la mise en page.
- Je utiliser HTML5, CSS3, JS ou encore Mozilla fonctionnalités spécifiques pour accomplir ce que la dernière version de Firefox est la seule cible, si de base de CSS/HTML plutôt que ces hacks serait de beaucoup préférable!
OriginalL'auteur not amused | 2013-03-25
Vous devez vous connecter pour publier un commentaire.
Une option qui pourrait fonctionner est d'utiliser le
:after
pseudo-élément. Quelque chose comme ceci:Nombre pourrait être modifié comme vous le souhaitez. Seul inconvénient que je peut voir tout de suite si vous avez besoin à l'appui de quelque chose de pré-IE8. http://caniuse.com/#feat=css-gencontent
Voici un violon.
L'opéra n'avait pas l'aligner les clickbox de la bonne façon pour moi, en utilisant l'exemple ci-dessus. Quelque chose qui fonctionnait le mieux pour moi est la suivante: jsfiddle.net/WD8Yh/47
OriginalL'auteur gotohales
Vous pouvez le faire en utilisant un plus grand rembourrage.
Par exemple:
Ici vous avez un exemple vivant:
http://jsfiddle.net/u5kuJ/1/
Mise à jour:
Avec votre violon: http://jsfiddle.net/XXgqu/1/
J'ai mis à jour ma réponse. Vérifier maintenant.
Qui bizarrement fait il ne cliquable à partir de la gauche, et en haut. De la droite et en dessous, il ne l'est pas. Sinon c'est l'effet, je suis à la recherche pour.
OriginalL'auteur Alvaro
J'ai fait une mise à jour de gotohales réponse, il travaillera avec quelle que soit la longueur du texte, puis ajouter un peu de rembourrage.
http://jsfiddle.net/vG7UY/2/
OriginalL'auteur J nui
Vous pouvez utiliser le
:after
pseudo-élément tampon de l'élément, et à l'aide detransform
etposition
vous pouvez positionner le remplissage centré sur le centre de l'élément sans incidence sur les autres éléments.Changer le
padding: 30px
à ce que le rembourrage vous avez besoin.Note: Ceci est basé sur gotohales solution, ce qui est une bonne approche, cependant, l'utilisation de haut et de gauche, avec des pixels de valeurs comme gotohales solution ne nécessite de prendre en compte la largeur/hauteur de l'élément que nous sommes rembourrage sinon le rembourrage sera au centre de l'écran.
OriginalL'auteur Leigh McCulloch
Je suis sûr que vous ne pouvez pas faire ce que vous demandez. Les seules choses qui viennent à l'esprit sont l'ajout de rembourrage, de marge et de la hauteur de la ligne. Alors que ce n'est pas ma solution préférée, mais selon le contexte du site, peut-être avoir une page avec tous les liens ci, qui a une plus grande cible.
Aussi, peut-être utiliser la
outline
& laoutline-offset
propriétés CSS avec un bon contraste de laisser les gens savent sur la liaison.Une autre chose est que les gens qui ont besoin d'une plus grande cible, utilisez le clavier le plus souvent à consulter un site web, afin de rendre votre site plus clavier amical peut vous aider. Par exemple, avez-vous un en-tête et la barre latérale, via le code, n'ceux qui viennent avant le contenu principal? Si donc placer un passez nav lien, ou un peu (selon modèle), peut également aider.
Probablement une bonne chose à inclure dans la question
OriginalL'auteur Ryan B