我在用作链接的图标下方出现了一条小线

Question

我正在向我的网站添加 twitter 和 facebook 图标并将它们用作我的帐户的链接，但是由于某种原因，根据屏幕截图，图标下方出现了一些小线条。

我已经使用无文本装饰和无轮廓来尝试摆脱它们。

如果我从代码中删除 href，这些行就会消失。

这是我的html

<div class="box mm">
       <ul class="nav">
       <li><a href="http://twitter.com/skramshots"> <img class="twitter"     src="images/twitterx.png" alt="twitter link" width="30" /> </a></li>
       <li><a href="http://www.facebook.com/webpage.skramshots?fref=ts"> <img class="facebook" src="images/facebook.png" alt="facebook link" width="30" /> </a></li>
       <li><img class="btn lightbox-61896367686376 email" src="images/email2.png" width="20" alt="email link" /></li></ul>

       <h1>SkramShots<br>Photography</h1><br><h2>Move your mouse pointer over the images</h2></div>

这是我的css

.nav {
text-decoration: none;
outline: none;
}

.nav li {

display: inline;
margin-left: 20%;


}

.nav li img {
margin-bottom: 45px;
margin-top: 10px;
text-decoration: none;
outline: none;

}

非常感谢任何帮助。 screenshot of lines

Answer 1

您将 text-decoration 应用于错误的标签。它需要应用于<a></a>标签。

 .nav li a{
      text-decoration:none;
    }