Définition d'une largeur et d'une hauteur sur une balise A


131

Est-il possible de définir la largeur et la hauteur en pixels sur une balise d'ancrage? Je voudrais que la balise d'ancrage ait une image d'arrière-plan tout en conservant le texte à l'intérieur de l'ancre.

li {
  width: 32px;
  height: 32px;
  background-color: orange;
}

li a {
  width: 32px;
  height: 32px;
  background-color: red;
}
<li><a href="#">Something</a></li>

Réponses:


288

Vous devez faire votre ancre display: blockou display: inline-block;puis il acceptera les valeurs de largeur et de hauteur.


66

Vous pouvez également utiliser display: inline-block. L'avantage de ceci est qu'il définira la hauteur et la largeur comme un élément de bloc, mais le définira également en ligne afin que vous puissiez avoir une autre balise juste à côté, en laissant l'espace parent.

Vous pouvez en savoir plus sur les propriétés d'affichage ici


Je cherchais une solution pour définir la largeur de la balise d'ancrage comme son contenu de texte et non dans une certaine largeur et hauteur, donc le paramétrer sur "inline-block" a fait l'affaire exactement. Merci.
TheCuBeMan

7

Toutes ces suggestions fonctionnent à moins que vous ne mettiez les ancres dans une liste UL.

<ul>
    <li>
        <a>click me</a>>
    </li>
</ul>

Ensuite, toutes les règles de feuille de style en cascade sont remplacées dans le navigateur Chrome. La largeur devient automatique. Ensuite, vous devez utiliser les règles CSS en ligne directement sur l'ancre elle-même.



En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.