html - achorリンクの背景画像を水平方向に表示する

Question

次のように、Webページにさまざまなアイコンを表示しようとしています。

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