覆盖最后两个元素之间的空格

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。因此，如果您希望网站在每个浏览器中正常工作，您应该尝试其他方式。我会在你的HTML中创建类li（或类似的东西）的社交social，然后我会添加一些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;}