如何在按钮之间添加相等的填充？

Question

http://buttonspace.com/

我想在顶部的 4 个按钮之间放置相等的空间，但我遇到了麻烦。起初，“social-buttons” 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+ 按钮不会出现在 Fiddle 中。我确实使用脚本生成的实际 Google+ html 对其进行了测试，它似乎适用于我在 Firefox8、Window 7 上。

您可以保留现有的 HTML 以使其正常工作。

---

另一个修改：

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

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

Answer 2

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

1. 内联元素中没有块元素（你有 和里面有一些 div 等，使它成为一个 div）。

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

3. 尝试将问题减少到最低限度。例如。制作一个只有标题部分的页面。并尽可能多地删除 html，但错误仍然存​​在。然后尝试从那里修复它。有时很难看出问题是否真的是由之前的一些有缺陷的 css/html 造成的。

4. 不同的框有不同的样式（或者至少它们有不同的类等）。尝试统一它。想也许这些盒子是用一些 javascript 制作的（我不确定，我以前没用过那些盒子）？

5. 尝试这样做，只使用一些彩色 div，看看是否可以正确填充它们，然后一一切换到社交按钮。

我希望这可以帮助您入门。

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