如何使用內聯圖像替換文本創建無序列表

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

你的列表項li使用display: inline或display: inline-block：

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