0

サイトのページにリンクのリストを保持するフッターがあり、最後の 2 つのリンクはソーシャル アイコンです フッター項目

そして私はこの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 に何を追加すればよいですか?

edit : フッターのソースコードを追加しました。

4

2 に答える 2

0

HTMLコードを投稿していないので、私はそれを推測することしかできません. 次のようなものがあると仮定すると#footerLinks > li > a、トリックを行う必要があります。

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

このコードは、最後の のパディングを削除しli、2 つのソーシャル アイコン間のスペースを 50% 減らします。スペースを完全に削除したい場合は、CSS セレクターを使用して削除できますnth-last-child()。

last-childただし、CSS セレクターは多くの古いブラウザーではサポートされていないことに注意してください。そのため、ウェブサイトをすべてのブラウザで適切に動作させたい場合は、別の方法を試す必要があります。HTML でソーシャルliクラスsocial(または類似のもの) を作成し、CSS コードを追加して、そのクラスのパディングを削除します。を使用せずに、これらのアイテムの境界線を非表示にすることもできますlast-child。HTMLコードを投稿すると、例を挙げることができます。

于 2012-11-18T18:14:34.950 に答える
0

スペースが必要ないリンクにクラスを追加します。

  <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-18T18:24:02.863 に答える