Question

我在每个帖子的底部添加了一个facebook和twitter分享按钮，但这两个按钮未对齐大约3px，我无法弄清楚如何使它们彼此对齐。

我尝试在Facebook小部件中添加负边距，并尝试在Twitter小部件中添加正面边距。浏览器两次都忽略它（即使我使用过！重要）。

有谁知道如何解决这个问题？

这是我的代码：

HTML：

<!--FACEBOOK SCRIPT-->
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=258039414242053&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <!--/ FACEBOOK SCRIPT-->
    <!--TWITTER SCRIPT-->
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    <!--/ TWITTER SCRIPT-->

<div class="sharepost">
      <a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?>" data-via="CantStopShippin" data-hashtags="<?php $category = get_the_category(); echo $category[0]->cat_name; ?>" data-count="vertical">Tweet</a>
      <div class="fb-share-button" data-href="<?php the_permalink() ?>" data-type="box_count"></div>
</div>

这是我试图添加的CSS来解决问题：

.fb-share-button {
    margin-top: -2px !important;
}

此外，.sharepost的CSS（chare按钮在里面）是：

.sharepost {
width: 325px;
height: 65px;
float: right;
text-align: center;
margin-top: 3px;
}

Answer 1

您可以尝试将按钮设置为td，每个按钮位于一个<td>。

示例...... http://jsfiddle.net/QC6J6/8/

Answer 2

好的，在reset.css中将margin: 0px;替换为margin-top: -5px;（：或者将其替换为您想要的任何px金额，但需要为负数。

Answer 3

将vertical-align: top;添加到.fb_iframe_widget可以解决问题。

Twitter＆amp; Facebook分享按钮未对齐

3 个答案: