CSS类背景图像水平定位？

Question

所以我试图在一个318像素的div上放置一个facebook/youtube/twitter按钮(每个按钮大约106个像素).

预期的输出

预期布局http://iforce.co.nz/i/dseazq4c.zqc.png

我正在使用浮动和显示:在每个按钮上呈现内联.我在下面提供了我的代码.

CSS代码

#socialController{
width: 318px;
background-color:#fff;
display: inline;
}
.socialmedia
{
width:106px;
height:20px;
float:left;
vertical-align:middle;
background-position:center center;
background-repeat:no-repeat;
background-color:#373737;
}
.socialmedia:hover{
background-color:#444
}
#sm_fb{
background-image:url(../img/fb.png)
}
#sm_tw{
background-image:url(../img/tw.png)
}
#sm_yt{
background-image:url(../img/yt.png)
}

HTML代码

<div id="socialController">
<a href="#" class="socialmedia" id="sm_fb" title="CSGONZ Facebook"></a>
<a href="#" class="socialmedia" id="sm_yt" title="CSGONZ Youtube"></a>
<a href="#" class="socialmedia" id="sm_tw" title="CSGONZ Twitter"></a>
</div>

但问题是我没有达到我预期的水平位置..而是我得到了按钮的垂直定位.

实际产出

实际输出http://iforce.co.nz/i/2mce1tlk.53i.png

问题是什么？我错过了什么？实现横向布局？

Answer 1

让我们试试这个：

#socialController {
width: 318px;
background-color:#fff;
display: block;
}

像这样：

http://jsfiddle.net/CQTus/