CSS类背景图片的水平定位？

Question

所以我正在尝试在一个宽度为318像素的div上定位Facebook / YouTube / Twitter按钮（每个按钮约106像素）。 预期输出
_{(来源：iforce.co.nz)} 当按钮被呈现时，我在每个按钮上使用了float和display:inline。我在下面提供了我的代码。 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>

但问题是我的按钮没有达到我预期的水平定位，而是得到了垂直定位。
实际输出

_{(来源：iforce.co.nz)}
我的问题在哪里？我错过了什么？如何实现水平布局？

- classicjonesynz

Answer 1

让我们试试这个：

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

Like this:

http://jsfiddle.net/CQTus/

- skywlkr

---

嘿，我在发帖之前已经尝试过那个方法了，还有其他的想法吗？ - classicjonesynz

对我来说，它是这样工作的：http://jsfiddle.net/CQTus/ - skywlkr

我认为你的链接或容器从之前的声明中获取了一些样式，而你刚刚复制粘贴的那些被它们覆盖了。你应该检查元素在Firebug或类似工具中实际获得的样式。 - skywlkr

谢谢skywlkr，我发现是CSS的另一部分引起了问题。哈哈 - classicjonesynz

@Killrawr 嘿嘿，看到我的回答了吗？我刚刚发出来的时候你已经接受了这个答案;) 所以我晚了一秒钟，我猜... - Christoph

Answer 2

应该将display: inline-block; 应用于socialmedia，而不是socialController

- Softnux

---

我已经应用了更改，但我的链接仍然垂直显示而不是水平显示 :( 有其他想法吗？ - classicjonesynz

不是很对，应该可以工作：http://jsfiddle.net/7tcbT/ - Softnux

Answer 3

我认为您必须使用列表来横向显示按钮。

尝试使用this：这是一个使用CSS制作水平菜单的教程（包含源代码）。

希望能对您有所帮助 :)

- Marco Carletti

---

你能否根据我的 CSS 给我提供一个实现方案呢？ :) - classicjonesynz

Answer 4

请在此处查看演示 - http://jsfiddle.net/6PaY4/

希望这能有所帮助！

- Dipak

---

@Killrawr，请查看我在这里发布的演示。它应该适用于你。 - Dipak

Answer 5

你的代码本身是完全有效的...

看看我从你的代码创建的示例

你必须在其他地方出现了错误。查找另一个声明在你的CSS中覆盖了你提供的样式。一定有一个声明像这样：a{display:block}相应地进行更改。

- Christoph

---

+1 鼓励您的努力 :) 谢谢！ - classicjonesynz

@Killrawr，我猜对了吗？ - Christoph

是的，你说得对。问题在于我的代码中的某个地方与定位发生了冲突，因此导致了意外的结果。 - classicjonesynz

Answer 6

我想这可能是CSS中其他原因导致的故障，感谢大家的答案和支持 :)

- classicjonesynz

Answer 7

您可以通过以下方式实现您的目标：

请参考此 Working Fiddle 示例！

CSS

#socialController{
  width: 318px;
  background-color:#fff;
  display: block;         /* display the wrapper as a block */
}
.socialmedia {
  width:106px;
  height:20px;
  display:block;          /* display the element as a block */
  float:left;             /* float the elements to place them side by side */
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#373737;
}

- Zuul