图像旁边的奇怪点（删除下划线到锚标签）

Question

我已经建立了一个学校项目的网站，一切都很好，直到我看到按钮旁边的那些点/线。这是一张图片。

我的图片代码是：

CSS

 .button1 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 padding-top: 20px;
 }
 .button2 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 }
 .button3 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 }

 .button4 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 }
 .button5 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 padding-top: 40px;
 }
 .button6 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 }
 .button7 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 }

 .button8 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 }
 .button9 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 padding-top: 40px;
 }
 .button10 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 }
 .button11{
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 }

 .button12 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 }
 .button13{
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 padding-top: 40px;
 }

 .button14 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 }
 .nonbut{
 padding-right: 35px;
 }

HTML

<div>
   <a href="menu.pdf" > <img src="images/button1.png" class="button1">
   <a href="Lmenu.html"> <img src="images/button2.png" class="button2">
   <a href="brunch.html"> <img src="images/button3.png" class="button3"> </a>
   <a href="FD.html"> <img src="images/button4.png" class="button4"> </a>
</div>
<div>
   <a href="GM.html"> <img src="images/button5.png" class="button5"> </a>
   <a href="LotD.html"> <img src="images/button6.png" class="button6"> </a>
   <a href="CWU.html"> <img src="images/button7.png" class="button7"> </a>
   <a href="B2B.html"> <img src="images/button8.png" class="button8"> </a>
</div>
<div>
   <a href="LM.html"> <img src="images/button9.png" class="button9"> </a>
   <a href="ID.html"> <img src="images/button10.png" class="button10"> </a>
   <a href="LCT.html"> <img src="images/button11.png" class="button11"> </a>
   <a href="CH.html"> <img src="images/button12.png" class="button12"> </a>
</div>
<div>
   <img src="images/button13.png" class="button13"> 
   <img src="images/nonbut.png" class="nonbut">
   <img src="images/nonbut.png" class="nonbut">
  <img src="images/button14.png" class="button14">
</div>
</div>

“Nobut”是我用于空间的空图像。

Answer 1

浏览器将<a href=...>和<img src=...>之间的空格视为可打印文本，因为它位于超链接标记内，所以它带有下划线。

只需删除空格即可，请使用<a href=...><img src=...></a>。

除此之外：您忘记了几个</a>结束标记。最好添加它们。

Answer 2

要指出两件事。

1. 使用css text-decoration:none;作为锚标记。如果没有这个，它会导致文本有下划线。
2. 您的少数锚标记缺少</a>标记。

实际原因是默认情况下，锚链接会有下划线，默认的锚链接CSS规则是 text-decoration:underline 这是浏览器显示的方式锚链接。所以锚内的所有文本都会有一个下划线。在你的情况下，你有一个空间，它是空间的下划线。 因此，将此CSS规则添加到锚标记。

 a{
   text-decoration:none;
  }