html - 列表图像之间的小方框

Question

我的网站有问题。我在我的网站上添加了一些社交媒体图片按钮，而且总是那些小按钮改变颜色的框出现在它们旁边。我不知道如何解决这个问题。

你有什么想法吗？

图片链接如下: http://i.imgur.com/HD9AqLv.png

HTML 片段

    <div class="social">
        <ul>
            <li> <a href="#"> <img src="assets/Android.png" alt="Smiley face" height="42" width="42"> </a> </li>
            <li> <a href="#"> <img src="assets/GitHub.png" alt="Smiley face" height="42" width="42">  </a> </li>
            <li> <a href="#"> <img src="assets/GooglePlus.png" alt="Smiley face" height="42" width="42">  </a> </li>
            <li> <a href="#"> <img src="assets/LinkedIn.png" alt="Smiley face" height="42" width="42">  </a> </li>
            <li> <a href="#"> <img src="assets/Mail.png" alt="Smiley face" height="42" width="42">  </a> </li>
            <li> <a href="#"> <img src="assets/Reddit.png" alt="Smiley face" height="42" width="42">  </a> </li>
            <li> <a href="#"> <img src="assets/YouTube.png" alt="Smiley face" height="42" width="42">  </a> </li>
        </ul>

    </div>

CSS 片段

.social{
float: right;
padding-top: 1.1rem;
}

.social ul{
list-style: none;
display: inline;
}

.social li{
padding-left: 10px;

display: inline;
}

归根结底，我什至不认为它与该代码有任何关系。也许这只是一个一般错误。

Answer 1

我认为您看到的是浏览器默认的 anchor 标记下划线。添加此 css 样式应该摆脱那些:

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