gạch giữa hai hình ảnh liên kết

Question

Tôi có mã HTML sau bên trong một 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> 

Những kết quả trong các đầu ra sau đây với một dấu gạch dưới !? giữa chúng:

Nếu tôi chỉ sử dụng một hình ảnh liên kết gạch biến mất.

Tại sao điều này xảy ra và làm cách nào tôi có thể loại bỏ dấu gạch dưới?

Answer 1

Dấu gạch dưới là một hoặc nhiều ký tự khoảng trắng được gạch dưới. Khắc phục là xóa bất kỳ thứ gì có thể được lấy làm khoảng trống bên trong phần tử a, chẳng hạn như ngắt dòng. Một ngắt dòng và khác whitespaceinside một thẻ (giữa < và >) là OK, mặc dù:

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

Điều này có nghĩa rằng vẫn còn một ngắt dòng giữa a yếu tố, và các trình duyệt thông thường đối xử với nó như một không gian. Trong trường hợp này, điều này có thể không quan trọng vì không gian nằm ngoài các phần tử a và do đó sẽ không được gạch dưới; nó chỉ gây ra một khoảng cách nhỏ. Nhưng để làm cho hình ảnh tách biệt rõ ràng hơn, hãy xem xét thêm padding-left vào phần tử a thứ hai.

Answer 2

'Gạch dưới' thực chất là gạch chân của thẻ 'a'. Đó là một phong cách được áp dụng bởi các trình duyệt để chỉ ra một siêu liên kết. Để loại bỏ gạch dưới nhưng giữ liên kết, hãy tạo kiểu 'a'.

a{text-decoration:none;} 

Bạn cũng có thể có các liên kết khác trên trang, vì vậy tốt nhất nên cung cấp cho các liên kết này một lớp để chúng có thể được tạo kiểu riêng biệt.

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

Và sau đó làm một cái gì đó như thế này:

a.imageLink{ 
    text-decoration:none; 
} 

Ngoài ra, bạn có thể sử dụng phong cách nội tuyến:

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

Xin lỗi nếu bạn đã biết điều này và có vẻ như rõ ràng, tôi chỉ muốn để đưa ra một câu trả lời rõ ràng. :)

Answer 3

Xóa khoảng trắng giữa thẻ bắt đầu và thẻ kết thúc của các neo và hình ảnh chúng chứa.

Answer 4

Bạn có thể loại bỏ các trang trí văn bản bằng cách sử dụng css sau

a 
{ 
text-decoration: none; 
} 

hoặc bạn có thể loại bỏ các khoảng trắng giữa các hình ảnh và các thẻ neo.

Cả hai đều sẽ khắc phục sự cố

Answer 5

Xóa text-decoration cho những thẻ a là đủ - không cần phải giảm khả năng đọc đánh dấu của bạn bằng cách xóa các dòng mới và thụt lề.

Nhưng hãy nhớ để loại bỏ phong cách mà cho hover quá:

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