リスト間のリトル画像

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

アンカータグにはブラウザのデフォルトの下線があります。このCSSスタイルを追加すると、それらを取り除く必要があります：

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