CSS类背景图像水平定位？

所以我试图在一个318像素的div上定位一个facebook/youtube/twitter按钮（大约每个按钮106个像素）。CSS类背景图像水平定位？

预期输出继电器

expected layout 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>

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

实际输出

actual output http://iforce.co.nz/i/2mce1tlk.53i.png

问题是什么？我错过了什么？实现水平布局？

来源

2012-06-11 Killrawr

让我们试试这个：

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

像这样：

http://jsfiddle.net/CQTus/

来源

2012-06-11 07:58:17 skywlkr

嘿我已经尝试过之前，我发表的帖子，任何其他的想法？ – Killrawr

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

我认为你的链接或你的容器正在从之前的声明中获得一些风格，而你在这里拷贝过来的风格被它们覆盖。你应该检查元素在Firebug中的实际风格或类似的东西。 – skywlkr

display：inline-block;应适用于社会化媒体，而不是socialController

来源

2012-06-11 07:58:01 Softnux

我申请变更东西在别的CSS，感谢大家，但我仍然得到我的链接垂直和水平不显示:(任何其他想法？ – Killrawr

不是真的，应该工作：http://jsfiddle.net/7tcbT/ – Softnux

我认为你必须使用一个列表在一个水平线上，以显示你的按钮。

尝试this：这是一个教程（带源代码），用于CSS中的水平菜单。

我希望它能帮助:)

来源

2012-06-11 08:01:39

任何机会，你可以给我一个基于我的CSS的实现？ :) – Killrawr

检查这里的演示 - http://jsfiddle.net/6PaY4/

希望这有助于！

来源

2012-06-11 08:07:47 Dipak

@Killrawr检查我在这里发布的演示。它应该为你工作 – Dipak

你可以实现你的目标是这样的：

看到这个Working Fiddle例子！

enter image description here

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

来源

2012-06-11 08:18:50 Zuul

你的代码，因为它代表完全有效的...

见我从your code

所做的例子，您必须在其他地方有错误。在你的CSS中寻找另一个覆盖你提供的样式的声明。必须有一个这样的声明：a{display:block}相应地修改它。

来源

2012-06-11 08:23:03 Christoph

+1的努力:)谢谢！ – Killrawr

@Killrawr我猜对了吗？ – Christoph

是的，你做的..问题是我的代码中的其他地方与定位冲突..因此给我意想不到的结果。 – Killrawr

我想这是造成故障的答案和安慰:)

来源