Les balises d'ancrage () peuvent-elles avoir une largeur et une hauteur spécifiques en pixels ?

Susan Sarandon
Libérer: 2024-10-31 07:05:18
original
933 Les gens l'ont consulté

Can Anchor Tags (<a>) Vous avez une largeur et une hauteur spécifiques en pixels ? 
) Vous avez une largeur et une hauteur spécifiques en pixels ? " />

Personnalisation des dimensions des balises d'ancrage

Question :

Les balises d'ancrage () peuvent-elles avoir une largeur et une hauteur spécifiques en pixels ? Comment y parvenir tout en préservant le texte dans l'ancre ?

Contexte :

Considérez le code CSS suivant :

<code class="css">li {
  width: 32px;
  height: 32px;
  background-color: orange;
}

li a {
  width: 32px;
  height: 32px;
  background-color: red;
}</code>
Copier après la connexion

HTML :

<code class="html"><li><a href="#">Something</a></li></code>
Copier après la connexion

Résolution :

Pour activer la personnalisation de la largeur et de la hauteur des balises d'ancrage, il est nécessaire de modifier leur propriété d'affichage :

<code class="css">li a {
  display: block;  // or display: inline-block;
  width: 32px;
  height: 32px;
  background-color: red;
}</code>
Copier après la connexion

En définissant display: block ou display: inline-block, la balise d'ancrage devient un élément de niveau en ligne qui prend en charge à la fois la largeur et la hauteur. De cette façon, la balise d'ancrage peut conserver son contenu textuel tout en affichant également une image d'arrière-plan.

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal