覆蓋最后兩個元素之間的空間

Question

我在網站頁面的頁腳中包含鏈接列表，最后兩個鏈接是社交圖標

而且我有這個CSS代碼

   #FooterLinks{
        width:960px;
        margin:0 auto;
        text-align:center;
        padding-top:10px;
        font-weight:bold;
}

#FooterLinks li{
        display:inline;

        color:White;
}
#FooterLinks li:last-child{
        border:none;
}
#FooterLinks li a {

        color:White;
        padding: 0 10px;

}
#FooterLinks li a img{

        border:none;

}
a:link{text-decoration:none;}

#FooterLinks li a:hover{
        color:Red;

}

這是我的頁腳的源代碼：

<div id="FooterLinks">
 <ul>
   <li id="fbAbout"><a href="aboutus.aspx">About Us</a></li>
   <li id="fbcareers"><a href="careers.aspx">Careers</a></li>
   <li id="fbprivacy"><a href="privacy.aspx">Privacy</a></li>
   <li id="fbterms"><a href="terms.aspx">Terms</a></li>
   <li id="fbpress"><a href="press.aspx">Press</a></li>
   <li id="fbcontactus"><a href="contactus.aspx">Contact Us</a></li>
   <li id="fbfaq"><a href="faq.aspx">FAQ</a></li>
   <li id="fbgethelp"><a href="gethelp.aspx">Get Help</a></li>
   <li id="twitter"><a href="https://twitter.com/YOUR_USER_NAME"><img src="Imaes/Main/SocialIcons/twitter.png" width="32" height="32" alt="Twitter"  /></a></li>
   <li id="facebook"><a href="http://www.facebook.com/298542786850699"><img src="Images/Main/SocialIcons/facebook.png" width="32" height="32" alt="Facebook" /></a></li>

  </ul>
  <p>&copy; PlaySight Interactive Ltd. All Right Reserved</p>       
</div>

我應該在CSS中添加些什么來解決我的問題？

編輯：我添加了頁腳的源代碼。

Answer 1

由於您尚未發布HTML代碼，因此我只能猜測一下。 假設您有#footerLinks > li > a之類的內容，則應使用以下方法：

#FooterLinks li:last-child a {
    padding: 0;
}

此代碼刪除了最后一個li的填充，從而將兩個社交圖標之間的間距減少了50％。 如果要完全刪除空間，可以使用CSS選擇器nth-last-child()刪除。

請注意，盡管許多較舊的瀏覽器均不支持CSS選擇器的last-child 。 因此，如果您希望網站在每個瀏覽器中都能正常運行，則應嘗試其他操作。 我會讓社會li階級social （或類似的東西）在你的HTML，然后我會添加一些CSS代碼去除填充該類。 然后，您也可以隱藏那些沒有last-child物品的邊框。 如果您發布HTML代碼，我可以舉個例子。

Answer 2

將類添加到不需要空格的鏈接中：

  <li id="twitter"><a class='noPadding' href="https://twitter.com/YOUR_USER_NAME"><img src="Images/Main/SocialIcons/twitter.png" width="32" height="32" alt="Twitter"  /></a></li>
  <li id="facebook"><a class='noPadding' href="http://www.facebook.com/298542786850699"><img src="Images/Main/SocialIcons/facebook.png" width="32" height="32" alt="Facebook" /></a></li>

和CSS：

.noPadding{ padding:0px;}