html - página - Subrayar entre dos enlaces de imagen

hipervinculos en html ejemplos

Question

Tengo el siguiente código HTML dentro de un 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>

¿Qué resultados en la siguiente salida con un guión bajo? entre ellos:

Si uso solo un enlace de imagen, el guión bajo desaparecerá.

¿Por qué sucede esto y cómo puedo deshacerme del guión bajo?

Answer 1

El ''subrayado'' es de hecho el subrayado de la etiqueta ''a''. Es un estilo aplicado por los navegadores para indicar un hipervínculo. Para deshacerse del subrayado pero mantener el hipervínculo, diseñe la etiqueta ''a''.

a{text-decoration:none;}

Probablemente también tenga otros enlaces en la página, por lo que es una buena idea darles una clase a estos enlaces para que se puedan diseñar por separado.

<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>

Y luego hacer algo como esto:

a.imageLink{
    text-decoration:none;
}

Alternativamente, puedes usar estilos en línea:

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

Disculpas si ya sabes esto y parece obvio, solo quería dar una respuesta clara. :)

Answer 2

El guión bajo es uno o más caracteres espaciales subrayados. La solución es eliminar todo lo que pueda tomarse como un espacio dentro de un elemento, como un salto de línea. Un salto de línea y otros espacios en blanco dentro de una etiqueta (entre < y > ) está bien, sin embargo:

<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>

Esto significa que todavía hay un salto de línea entre los elementos a, y los navegadores generalmente lo tratan como un espacio. En este caso, esto probablemente no importa, ya que el espacio está fuera de los elementos y, por lo tanto, no se subrayará; solo causa un poco de espacio. Pero para hacer que las imágenes se separen más claramente, considere agregar padding-left en el segundo elemento.

Answer 3

Elimine el espacio en blanco entre las etiquetas de inicio y fin de los anclajes y las imágenes que contienen.

Answer 4

La eliminación text-decoration de text-decoration para esas etiquetas es suficiente; no es necesario reducir la legibilidad de su marcado eliminando nuevas líneas y sangrías.

Pero recuerda quitar ese estilo para hover también:

a, a:hover
{
    text-decoration: none;
}

Answer 5

Puede eliminar la decoración del texto mediante el siguiente css

a
{
text-decoration: none;
}

o puede eliminar el espacio en blanco entre la imagen y las etiquetas de anclaje.

Ambos arreglarán el problema

Answer 6

Tuve el mismo problema algunas veces. Intenté todo para resolverlo ... Lo que tienes que hacer es agregar text-decoration: none; a su etiqueta-a (no a la imagen).