更新

alt text

这是我到目前为止的代码..我遇到的问题是雅虎通过改变facebook和tweetmeme css行为来定制css。请检查附图并与之进行比较。我正在使用的代码是

<a name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php">Share</a><script 

src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

<script type="text/javascript">
tweetmeme_url = 'http://www.yahoo.com';
tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

请让我知道，我们可以拥有他们。我喜欢它的外观和感觉。：）

谢谢。

Answer 1

我使用http://www.easynda.com中的提示和一些改进为http://neilgoodman.net/2012/01/14/making-social-buttons-line-up-in-a-row-in-css/解决了这个问题。

我开始尝试在CSS中使用边距或填充来调整社交按钮的位置，但这并不起作用。每个按钮的边距和填充略有不同，这意味着我的调整从未正常工作，并且在浏览器中看起来并不相同。

需要的是能够适应按钮之间的变化，并使它们保持在我将它们放入HTML的位置。解决方案是使用浮动。 Max Design有一个漂亮的浮动教程，附带示例：//css.maxdesign.com.au/floatutorial/introduction.htm。

根据Neil网站的提示让我来到这里 - 但问题明显。

（我发布图片，但还没有足够的声誉点）。

LinkedIn按钮位于其DIV的顶部，而FB按钮位于第一张图像中的DIV中间。有几个问题需要注意：

a：FB共享按钮的宽度至少为90px / //developers.facebook.co ....但是，根据一个人拥有的共享数量，宽度是动态的。

b：FB共享和LI共享按钮之间没有余量 -

c：LI分享按钮需要更多宽度和动态宽度，因为随着时间的推移，它将获得自己的计数。

c：对于FB，20 px的高度是不够的 - 即使FB按钮只有20px，JS也会在可见按钮上方添加像素。另请注意，计数气泡的底部被切断

d：最明显的是，LI的垂直定位很高。

我解决了这个问题，方法是浮动一个容器，按住一个行高（如果为1）并使用一些CSS浮动内联显示的按钮，最小宽度，最小高度和左边距。

结果是截至发布之日的实际情况（再次，需要声望点才能发布图片和两个以上的链接）

这是我的HTML和CSS：

<div class="social-button-container" style="position: relative; z-index: 999;">
    <!-- Facebook -->
    <div class="social-button fb-like" data-href="http://easynda.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
    <!-- LinkedIn -->
    <div class="social-button">
    <script type="IN/Share" data-url="http://www.easynda.com" data-counter="right"></script></div>
    <!-- Twitter -->
    <div class="social-button">
        <a href="https://twitter.com/EasyNDA" class="twitter-share-button" data-show-count="true" data-show-screen-name="false"></a>
    </div>
    <div style="clear: both;"></div>
</div>


.social-button-container {
  /*background-color: red;*/    
  /**
  * This is a nice CSS trick that allows you to clear an element
  * without having to add extra elements to your HTML. This helps
  * separate content from design, which should always be an architectural
  * goal.
  */
  float: left;
  line-height: 1;
}

.social-button {
  float: left;
  min-width: 100px;
  display: inline;
  min-height: 22px;
  padding-right: 5px;
}

Answer 2

他们在元素上使用无序列表来显示按钮。

UL主要用于垂直显示项目列表，但您可以使用CSS来使项目显示在彼此旁边。

<ul>
  <li style="display:inline">One</li>
  <li style="display:inline">One</li>
</ul>

我认为上述情况可行。

然后你需要做的只是对齐它。

<div style="width:400px">

    <ul style="float:right">
      <li style="display:inline">One</li>
      <li style="display:inline">One</li>
    </ul>

</div>

不要忘记使用类而不是像我这里的内联样式。

Answer 3

好吧，你基本上只需处理这样一个事实：一个是内联（a）元素，另一个是块（iframe）元素，之后变得非常简单，只需测试：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#fb_share, iframe {
    display: block;
    float: left;
    line-height: 2em;
    margin: 0 1em 0 0;
}
</style>
</head>
<body>

<a id="fb_share" name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"></script>

<script>
tweetmeme_url = 'http://www.yahoo.com';
tweetmeme_style = 'compact';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js"></script>

</body>
</html>

Answer 4

将您的社交媒体按钮放入父div，并为每个div分配ID。

定位内部iframe元素，例如：

#fblikeblock iframe, #gplusblock iframe {
vertical-align: top !important;
}

其中fblikeblock和gplusblock是父div。

并在父div上使用它：

#fblikeblock, #gplusblock {
display: inline !important;
position: relative;
zoom: 1;
}

正确对齐社交按钮

更新

4 个答案: