Podkreślenie między dwoma image-linki

Question

Mam następujący kod HTML wewnątrz 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> 

co skutkuje następującym wyjściu z podkreślenia !? między nimi:

Jeśli używam tylko jeden obraz-link podkreślenia znika.

Dlaczego tak się dzieje i jak mogę się pozbyć podkreślnika?

Answer 1

podkreślenia jest jeden lub więcej podkreślone spacje. Poprawka polega na usunięciu wszystkiego, co może być użyte jako spacja wewnątrz elementu a, takiego jak podział wiersza. Przerwa linia i inne whitespaceinside tag (między < i >) jest OK, ale:

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

Oznacza to, że nadal istnieje podział wiersza między a elementów oraz przeglądarek ogólnie traktować go jako przestrzeń. W tym przypadku nie ma to prawdopodobnie znaczenia, ponieważ przestrzeń znajduje się poza elementami a i dlatego nie zostanie podkreślona; po prostu powoduje małe odstępy. Aby zdjęcia były wyraźniej rozdzielone, należy rozważyć dodanie padding-left na drugim elemencie a.

Answer 2

"Podkreślenie" to podkreślenie znacznika "a". Jest to styl stosowany przez przeglądarki do wskazywania hiperłącza. Aby pozbyć się podkreślenia, ale zachować hiperłącze, oznacz znacznik "a".

a{text-decoration:none;} 

Prawdopodobnie będziesz mieć inne linki na stronie też, więc jest to dobry pomysł, aby dać te linki klasę, więc mogą być urządzone oddzielnie.

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

A potem zrobić coś takiego:

a.imageLink{ 
    text-decoration:none; 
} 

Alternatywnie, można użyć wbudowanych stylów:

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

Przepraszamy, jeśli już o tym wiedzą i wydaje się oczywiste, chciałem po prostu dać jasną odpowiedź. :)

Answer 3

Usuń białą przestrzeń między początkowym i końcowym znacznikiem zakotwiczeń i zawartymi w nich obrazami.

Answer 4

Można też usunąć dekoracji tekstu przy użyciu następujących css

a 
{ 
text-decoration: none; 
} 

czy można zdjąć białą przestrzeń pomiędzy obrazem i znaczniki kotwicznych.

Zarówno będzie rozwiązać problem

Answer 5

Usunięcie text-decoration dla tych znaczników wystarczy - nie trzeba zmniejszać czytelności znaczników, usuwając nowe wiersze i wcięcia.

Ale pamiętaj, aby usunąć za hover też ten styl:

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