顯示阿克爾鏈接的背景圖像水平

Question

我試圖像下面顯示在我的網頁不同的圖標：

我曾嘗試以下HTML和CSS代碼，但它是垂直顯示的圖標，如以下：

HTML

<div id="socialNetwork"> 
<a href="http://www.twitter.com" target="_blank" class="twitter"></a> 
<a href="http://www.facebook.com" target="_blank" class="facebook"></a> 
<a href="http://www.linkedin.com" target="_blank" class="linkedIn"></a> 
</div> 

CSS

#socialNetwork a{ 
display:block; 
height:35px; 
width:34px; 
text-indent:-9999px; 

} 

.twitter { 
background-image:url(twitter.png); 
} 

.twitter:hover { 
background-image:url(twitter_hover.png); 
} 

.facebook { 
background-image:url(facebook.png); 
} 

.facebook:hover { 
background-image:url(facebook_hover.png); 
} 

.linkedIn { 
background-image:url(linkedIn.png); 
} 

.linkedIn:hover { 
background-image:url(linkedIn_hover.png); 
} 

我覺得代碼垂直顯示圖標，因爲我在#socialNetwork a有display:block;。但是，如果我刪除display:block;圖標不會出現。

你能告訴我如何使圖標水平地出現在上面的第一個圖像？

感謝

Answer 1

使用嘗試：

#socialNetwork a { display: inline-block; }