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

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>结束标签.最好添加它们.