CSS如何获得浮achors旁边的海誓山盟horizantal

标记如下CSS如何获得浮achors旁边的海誓山盟horizantal

 <div class="socialMediaPlugin"> 
    <a class="addthis_button_facebook"></a> 
    <a class="addthis_button_twitter"></a> 
    <a class="addthis_button_google_plusone_share"></a> 
    <a class="addthis_button_pinterest" ></a> 
    <a class="addthis_button_email"></a> 
    </div>

然后我试图

.socialMediaPlugin { 
float: right;

} 但他们似乎下海誓山盟，而不是下一个？我怎么能把他们并排？

来源

2012-04-10 StevieB

容器可能不够宽，无法容纳所有容器。 – Francisc 2012-04-10 20:36:32

可以使用

.socialMediaPlugin a{ 
    display: block; 
    position: relative; 
    float: left; 
}

的链接将一侧到另一侧

来源

2012-04-10 20:38:01

和链接会更好看，如果你把里面的东西一样

Facebook Twitter G+ interest E-mail

，除非你有你的CSS背景，宽度和高度给他们。并在IE7的显示器：内联块不起作用，如果你使用不同高度的链接 – 2012-04-10 20:40:57

你需要将它应用到的链接，而不是容器，所以你的CSS应该阅读

.socialMediaPlugin a { 
    float: right; 
}

你可以看到一个例子here

或者你可以使用

.socialMediaPlugin:nth-child(n) { 
    float: right; 
}

.socialMediaPlugin * { 
    float: right; 
}

虽然我不会建议它，它是相当哈克！

此外，你应该使用这样的事情的有序列表，你可以看到基于请求，从海报

这样的链接的顺序here

编辑的例子可以维护，所以有必要将链接包装在display:block的div中，并将其正确地浮动。看到这个活example。

CSS

.socialMediaPlugin div { display: block; float: right; }

来源

2012-04-10 20:38:32 jacktheripper

这似乎工作，但它扭转了锚的顺序，即第一个锚现在显示最后等无论如何围绕呢？ – StevieB 2012-04-10 20:44:00

看到这个解决方案http://jsfiddle.net/jackdent/cDwPb/3/ – jacktheripper 2012-04-10 20:45:43

而我的修改答案:) – jacktheripper 2012-04-10 20:47:37

自锚是，他们会自然地叠起旁边的海誓山盟alreayd联级别的元素。

问题更可能是您的容器不够宽，无法容纳堆放的物品，因此它们将其包裹起来。

无论是你还是你有一些其他样式应用到你的锚元素，导致他们像块级元素一样。

来源

2012-04-10 20:46:01

CSS如何获得浮achors旁边的海誓山盟horizantal

回答

相关问题