Question

我想在顶部的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，Window 7。

您可以保留现有的HTML，以便工作。

另一个编辑：

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

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

Answer 2

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

内联元素中没有块元素（你在里面有一些div等等，使它成为div）。
验证：尝试修复验证（虽然大多数可能是fb的东西）： http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbuttonspace.com%2F
尝试将问题减少到最低限度。例如。制作一个只包含标题部分的页面。并删除尽可能多的HTML，错误仍然存在。然后尝试从那里修复它。有时很难看出问题是否真的是它之前的一些有缺陷的css / html的问题。
不同的方框风格不同（或者至少它们有不同的类等）尝试统一它。想到也许盒子是用一些javascript制作的（我不确定，我之前没有用过盒子）？
尝试使用一些彩色div，看看是否可以正确填充它们，然后逐个切换到社交按钮。

我希望这可以帮助你开始。

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

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

2 个答案: