水平显示锚链接的背景图像

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

我认为代码会垂直显示图标，因为display:block;中有#socialNetwork a。但是，如果我删除display:block;，则图标不会显示。

请您告诉我如何使图标像上面的第一张图像一样水平显示？

由于

Answer 1

尝试使用：

#socialNetwork a { display: inline-block; }