html - 图像旁边的奇怪点(删除下划线以定位标签)

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>关闭标签。最好将它们添加进去。