恼人的小点出现，带有显示的无序列表：内联

Question

我堆积了以下问题。我有一个带有社交图标的无序列表，当我将display更改为inline时，图标的右下角会出现一点点。

HTML

<div class="iconos">
  <ul class="contacto">
    <li>
      <a href="mailto:xxxxxx.com" class="socialicon">
        <img src="images/mail.png" width="50" height="50">
      </a>
    </li>
    <li>
      <a href="https://www.facebook.com/pages/xxxxx" class="socialicon">
        <img src="images/facebook.png" width="50" height="50">
      </a>
    </li>
    <li>
      <a href="https://www.facebook.com/pages/xxxx" class="socialicon">
        <img src="images/twitter.png" width="50" height="50">
      </a>
    </li>
  </ul>

CSS

ul.contacto {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contacto li {
  padding: 20px;
  display: inline;
}

Answer 1

该点是<a>元素的下划线。你可以用这个隐藏：

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