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

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