0

順序付けられていないリストから 2 つのロゴを並べて (つまり、インラインで) 設定しようとしています。ロゴ画像は、テキスト リンクを置き換える必要があります。 

<footer>
<ul id="footer-social" class="pull-right">
    <li class="footer-facebook"><a href="#">Become a Facebook Fan</a></li>
    <li class="footer-twitter"><a href="#">Follow us on Twitter</a></li>
</ul>
</footer>

http://jsfiddle.net/KKd6K/1/

どんな助けでも大歓迎です。

4

2 に答える 2

1

http://jsfiddle.net/KKd6K/2/

関連する変更:li背景画像のサイズに幅/高さを設定できるように、ブロックに設定します。テキストのインデントを可能にするために、アンカーもブロックに設定します。liの代わりに背景をオンに設定しますa。

#footer-social li {
    display: block;
    float: left;
    width: 30px;
    height: 30px;
    overflow: hidden;
}

#footer-social li a {
    display: block;
    text-indent: -99999px;
}

#footer-social li.footer-facebook {
    background: url("http://s14.postimg.org/lszvw6dwd/facebook_logo.png") no-repeat;
}

#footer-social li.footer-twitter {
    background: url("http://s12.postimg.org/m5agrq8ah/twitter_logo.png") no-repeat;
}
于 2013-06-12T20:28:07.827 に答える
0

リスト項目でdisplay: inlineまたはを使用します。display: inline-blockli

li{
   display: inline;
}

background-images を使用し続けたい場合はdisplay: inline-block、部分的にブロック要素として機能し、次のように設定することもできwidthますheight。

li{
   display: inline-block;
   width: 30px; /* set to width of background-image */
   height: 30px; /* set to height of background-image */
}
于 2013-06-12T20:25:29.050 に答える