css - 如何使用替换文本的内联图像创建无序列表

Question

我正在尝试从无序列表中并排设置两个徽标（即内联）。徽标图像应替换文本链接。

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

任何帮助，将不胜感激。

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

Answer 2

在您的列表项上使用display: inline或：display: inline-blockli

li{
   display: inline;
}

如果您想继续使用背景图像，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 */
}