如何在按钮之间添加等间距？

Question

http://buttonspace.com/

我想在顶部的4个按钮之间放置相等的间距，但我遇到了麻烦。起初，“社交按钮”的id是在一个向左浮动的DIV中，但这导致滑块被推到了右边。

因此，我将所有内容都更改为，现在填充样式似乎没有任何效果。

然后我尝试添加"display: inline-block;“，因为我从另一个StackOverflow问题中读到了这一点，但这没有帮助。

下面是当前代码(忽略PHP)：

<!-- Social Buttons -->
    <span id="social-buttons">
        <fb:like href="<?php echo $url; ?>" send="false" layout="box_count" width="60" show_faces="false" font="verdana" class="fb-like"></fb:like>
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php echo $url; ?>" data-text="<?php echo $tweet_text; ?>" data-count="vertical" data-via="Button_Space">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
        <g:plusone size="tall" callback="callback" href="<?php echo $url; ?>" class="google-plus-one"></g:plusone>
        <script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=<?php echo $url; ?>"></script>
    </span>
    <!-- End Social Buttons -->

#social-buttons { display: inline-block; padding: 0 0 0 100px; }
.fb-like { padding: 3px 0 0 0; border:none; overflow:hidden; width:60px; height:90px; }
.twitter-share-button { padding: 6px 0 0 0; }
.google-plus-one { display: inline-block; padding: 0 0 0 10px; }

有什么想法吗？理想情况下，我希望最好的建议不仅是均匀地排列按钮，而且首先要使用适当的代码将按钮放在标题栏上;)我相信我的代码可以有很多改进。

Answer 1

更新：

如下所示：

http://jsfiddle.net/MjFmN/1/

#social-buttons div,
#social-buttons iframe {
    float:left !important;
    display:inline-block !important;
    margin:0 10px 0 0 !important;
    border:none;
    overflow:hidden;
}

.fb-like {
    width:50px!important;
}

请注意，Google+按钮不会出现在小提琴中。我使用该脚本生成的实际Google+ html对其进行了测试，它似乎适用于我的Firefox8，Windows7。

你可以留下你现在所拥有的HTML，让它继续工作。

另一个编辑：

我刚刚在IE9中尝试过，由于某些原因，FaceBook按钮显示在我的本地语言中，导致宽度发生变化，因此您只能看到图像的一部分( overflow:hidden等等)。如果您可以在FaceBook按钮上强制设置语言，这是可以解决的，但我没有使用它的经验来说明这是否可能。

http://forum.developers.facebook.net/viewtopic.php?id=58989似乎有一些关于如何做到这一点的提示。

Answer 2

这并不是真正的答案，但可能会对未来有所帮助：

在内联元素中没有块元素(你有，并且在它里面有一些div).

• Validation：，等等，让它尝试修复验证(尽管大部分可能是fb的东西)：http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbuttonspace.com%2F

• Try，将问题减少到最低限度。例如：创建一个只包含页眉部分的页面。并尽可能多地删除html，同时错误仍然存在。然后试着从那里修复它。

• 不同的框有不同的样式(或者至少它们有不同的类等等)。试着统一它。我想也许这些盒子是用javascript做的(我不确定，我以前没有用过这些盒子)？

• 试着这样做，只用一些彩色div，看看你是否能正确地填充它们，然后一个接一个地切换到社交按钮。

我希望这篇文章能帮助你入门。

编辑:我想问题出在FB按钮上。尝试删除它或查看那里的.fb_iframe_widget类。