0

我的网站页面中有一个包含链接列表的页脚，最后两个链接是社交图标 页脚项目

我有这个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 中添加什么来解决我的问题？

编辑：我添加了页脚的源代码。

4

2 回答 2

0

Add class to links you want no space:

  <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>

and CSS:

.noPadding{ padding:0px;}
于 2012-11-18T18:24:02.863 回答
0

由于您还没有发布您的 HTML 代码，我只能猜测。假设您有类似#footerLinks > li > a以下的内容应该可以解决问题：

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

此代码删除了最后一个 的填充，li将两个社交图标之间的空间减少了 50%。如果你想完全删除空间，你可以使用 CSS 选择器nth-last-child()。

请注意last-child，许多旧版浏览器不支持 CSS 选择器。因此，如果您希望您的网站在每个浏览器中都能正常工作，您应该尝试其他方法。我会在你的 HTMLli中创建类的社交social（或类似的东西），然后我会添加一些 CSS 代码来删除该类的填充。然后，您还可以隐藏那些不带last-child. 如果您发布您的 HTML 代码，我可以举个例子。

于 2012-11-18T18:14:34.950 回答