web-dev-qa-db-fra.com

Souligner entre deux liens d'image

J'ai le code HTML suivant dans une div:

<a href="http://www.mysql.com">
<img src="images/php-power-micro2.png" alt="Image not available" title="PHP" border="0"/>
</a>
<a href="http://www.php.net"> 
<img src="images/mysql-power.jpg" alt="Image not available" border="0" title="MySQL"/>
</a>

Ce qui donne la sortie suivante avec un trait de soulignement!? entre eux:

Si je n'utilise qu'un seul lien image, le trait de soulignement disparaît.

Pourquoi cela se produit-il et comment puis-je me débarrasser du soulignement?

htmlcssunderscores
32
Birdman

Le trait de soulignement est un ou plusieurs espaces soulignés. Le correctif consiste à supprimer tout ce qui pourrait être pris comme un espace dans un élément a, tel qu'un saut de ligne. Un saut de ligne et d'autres espaces dans une balise (entre < et >) sont acceptables, cependant:

<a href="http://www.mysql.com"><img src="images/php-power-micro2.png" 
  alt="PHP powered" border="0" title="PHP" /></a>
<a href="http://www.php.net"><img src="images/mysql-power.jpg"
  alt="MySQL powered" border="0" title="MySQL"/ ></a>

Cela signifie qu'il y a toujours un saut de ligne entre les éléments a et que les navigateurs le traitent généralement comme un espace. Dans ce cas, cela n’a probablement pas d’importance, car l’espace se trouve en dehors de a éléments et ne sera donc pas souligné; cela provoque juste un peu d'espacement. Mais pour que les images soient plus clairement séparées, envisagez d'ajouter padding-left au deuxième élément a.

43
Jukka K. Korpela

Le soulignement souligne en fait le tag "a". C'est un style appliqué par les navigateurs pour indiquer un lien hypertexte. Pour supprimer le soulignement tout en conservant le lien hypertexte, appelez la balise 'a'.

a{text-decoration:none;}

Vous aurez probablement aussi d'autres liens sur la page, c'est donc une bonne idée de donner une classe à ces liens afin qu'ils puissent être stylés séparément.

<a class="imageLink" href="http://www.mysql.com">
  <img src="images/php-power-micro2.png" alt="Image not available" title="PHP" border="0"/>
</a>
<a class="imageLink" href="http://www.php.net"> 
  <img src="images/mysql-power.jpg" alt="Image not available" border="0" title="MySQL"/>
</a>

Et ensuite, fais quelque chose comme ça:

a.imageLink{
    text-decoration:none;
}

Alternativement, vous pouvez utiliser des styles inline:

<a style="text-decoration:none;" class="imageLink" href="http://www.mysql.com">

Toutes mes excuses si vous le savez déjà et que cela semble évident, je voulais juste donner une réponse claire. :)

17
IsisCode

Vous pouvez soit supprimer la décoration du texte en utilisant le css suivant

a
{
text-decoration: none;
}

ou vous pouvez supprimer l'espace blanc entre l'image et les balises d'ancrage.

Les deux vont résoudre le problème

4
BrettAdamsGA

Supprimez les espaces entre les balises de début et de fin des ancres et les images qu’elles contiennent.

4
Quentin

J'ai eu le même problème plusieurs fois. J'ai tout essayé pour le résoudre ... Ce que vous devez faire, c'est ajouter du texte-décoration: aucune; à votre a-tag (pas l'image).

0
Lucool

La suppression de text-decoration pour ces balises a suffit - inutile de réduire la lisibilité de votre balisage en supprimant les nouvelles lignes et les retraits.

Mais rappelez-vous de supprimer également ce style pour hover:

a, a:hover
{
    text-decoration: none;
}
0
Amin Saqi