Underscore tra due immagini-link

Question

Ho il seguente codice HTML all'interno di 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> 

che si traduce nella seguente output con una sottolineatura !? tra di loro:

Se io uso solo un'immagine-link sottolineatura scompare.

Perché sta succedendo e come posso eliminare il trattino basso?

Answer 1

La sottolineatura è di uno o più caratteri di spazio sottolineati. La soluzione è rimuovere tutto ciò che potrebbe essere preso come spazio all'interno di un elemento a, ad esempio un'interruzione di riga. Un'interruzione di riga e altri whitespaceinside un tag (tra il < e >) è OK, però:

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

Questo significa che non v'è ancora un'interruzione di linea tra i a elementi, e in genere i browser trattano come uno spazio. In questo caso, questo probabilmente non ha importanza, poiché lo spazio è all'esterno degli elementi a e quindi non sarà sottolineato; causa solo una piccola spaziatura. Ma per rendere le immagini più chiaramente separate, considera l'aggiunta di padding-left sul secondo elemento a.

Answer 2

Il "carattere di sottolineatura" è in realtà la sottolineatura del tag "a". È uno stile applicato dai browser per indicare un collegamento ipertestuale. Per eliminare la sottolineatura ma mantenere il collegamento ipertestuale, stile il tag 'a'.

a{text-decoration:none;} 

probabilmente dovrete altri link sulla pagina di troppo, quindi è una buona idea per dare a questi legami una classe in modo che possano essere in stile separatamente.

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

e poi fare qualcosa di simile:

a.imageLink{ 
    text-decoration:none; 
} 

In alternativa, è possibile utilizzare gli stili inline:

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

Ci scusiamo se si conosce già questo e sembra ovvio, volevo solo per dare una risposta chiara :)

Answer 3

Rimuovere lo spazio bianco tra i tag di inizio e fine delle ancore e le immagini che contengono.

Answer 4

è possibile rimuovere la decorazione del testo utilizzando il seguente CSS

a 
{ 
text-decoration: none; 
} 

o si può rimuovere lo spazio bianco tra l'immagine e le tag di ancoraggio.

Entrambi saranno risolvere il problema

Answer 5

La rimozione di text-decoration per i tag a è sufficiente: non è necessario ridurre la leggibilità del markup rimuovendo righe e rientri.

ma ricordatevi di rimuovere tale stile per hover troppo:

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