Définir une largeur et une hauteur sur une balise A
Est-il possible de définir la largeur et la hauteur en pixels sur une balise d'ancrage? J'aimerais 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>Vous devez faire votre ancre display: block ou display: inline-block; puis il accepte les valeurs de largeur et de hauteur.
Vous pouvez aussi utiliser display: inline-block. L'avantage est que la hauteur et la largeur sont définies comme un élément de bloc, mais également alignées afin que vous puissiez avoir une autre balise placée juste à côté, permettant ainsi à l'espace parent.
Vous pouvez en savoir plus sur propriétés d'affichage ici
Toutes ces suggestions fonctionnent si vous ne placez pas les ancres dans une liste UL.
<ul>
<li>
<a>click me</a>>
</li>
</ul>
Ensuite, toutes les règles de la feuille de style en cascade sont remplacées dans le navigateur Chrome. La largeur devient automatique. Vous devez ensuite utiliser les règles CSS en ligne directement sur l'ancre elle-même.
Ce n'est pas une copie exacte (pour autant que je puisse trouver), mais il s'agit d'un problème courant .
display:block est ce dont vous avez besoin. mais vous devriez lire la spécification pour comprendre pourquoi.
Ci-dessous travaille pour moi
display: block;
width: 100%;