重寫最後兩個元素

我有我的網站的頁面頁腳持有的鏈接列表之間的空間，最後兩個環節是社會圖標 footer items 重寫最後兩個元素

，我有這個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來解決我的問題？

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

來源

2012-11-18 shaharnakash

我們展示頁腳的一些HTML代碼.. –

既然您還沒有發佈您的HTML代碼，我只能猜測。假設你有類似#footerLinks > li > a以下應該做的伎倆：

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

此代碼移除填充最後li，減少50％的兩種社會圖標之間的空間。如果您想完全刪除空間，可以使用CSS選擇器nth-last-child()來完成。

請注意，儘管許多舊瀏覽器不支持CSS選擇器last-child。所以如果你想讓你的網站在每個瀏覽器中正常工作，你應該嘗試其他的東西。我會在您的HTML中創建類social（或類似的）的社交li，然後添加一些CSS代碼以刪除該類的填充。然後，您也可以在沒有last-child的情況下隱藏這些項目的邊框。如果你發佈你的HTML代碼，我可以舉一個例子。

來源

2012-11-18 18:14:34 Frog

沒有工作，任何其他的想法？ – shaharnakash

請勿使用內聯樣式。申請一個班級。 –

@shaharnakash：約翰·庫拉克是正確的，你應該使用類。由於內聯樣式，您的代碼的其他部分必須存在干擾。所以找出什麼和使用類！ – Frog

添加類的鏈接，你不想要的空間：

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

來源

2012-11-18 18:24:02

重寫最後兩個元素

回答

相關問題