largeur pour <a> tag en html

Question

Est-il possible de définir une largeur à la balise <a> en html? Si oui, quel est le chemin, s'il n'y a pas de travail?

Answer 1

Vous pouvez le redéfinir en tant qu'élément de bloc, puis définir sa largeur: a{display:block;width:400px}.

EDIT: Cependant, dans ce cas, il va commencer sur une nouvelle ligne et le prochain morceau de texte sera également dans une nouvelle ligne. Ce qui permet de résoudre le problème, est inline-block mode d'affichage, mais cela a encore des problèmes avec les anciennes versions de IE et FF (voir ici: http://caniuse.com/#search=inline-block)

Answer 2

La propriété width n'affecte css pas d'éléments en ligne tels que <a> ou <span>. Pour utiliser les propriétés au niveau des blocs comme width, vous devrez déclarer votre élément comme un élément de niveau bloc, en utilisant display:block:

<a style="display:block;width:200px">Your link</a> 

Answer 3

Comme d'autres ont dit, l'élément a est un élément en ligne et en tant que tel pas intéressé par les largeurs ou les hauteurs. Il ne cherche que le contenu et se fait aussi grand que le contenu l'exige. Toutefois, en fonction de ce que vous essayez de faire paraître, vous pouvez utiliser padding et margin pour modifier la distance par rapport à d'autres éléments en ligne. Par exemple <a style="padding: 0 5px;">some text</a> ajoute un remplissage 5px à gauche et à droite du texte. Mais encore une fois, la taille réelle sera basée sur la taille du texte.

Une approche différente, qui est plus un hack, et doit donc être évitée si possible, serait la suivante:

<a style="background: red; padding-right: 100px;"> 
    <span style="position: absolute;">Some text</span> 
</a> 

Cela ajoute un rembourrage de 100px à droite du texte, mais en définissant la position du texte sur absolu, ce texte affiche "au-dessus" du reste et est ignoré pour tous les calculs de taille supplémentaires, donc l'élément a ne contient essentiellement aucun contenu direct et en tant que tel une largeur de zéro avec un remplissage supplémentaire de 100px à droite. Donc, l'élément est exactement 100px de large. Et en ne modifiant pas les positions du span après l'avoir défini à absolu, il restera où il aurait été sans le absolu, donc il a la même apparence.

Answer 4

Si vous n'aimez pas display:block ou display:inline-block Vous pouvez utiliser le Rembourrage