如何调整右侧的Facebook,Twitter,Google +和LinkedIn按钮？

Question

我有基于WordPress的互联网门户网站.有一个Facebook赞按钮(对齐 - 右),但当我试图整合正确的其他按钮(Twitter,LinkedIn和Google+)时,他们将偏向左侧.我不知道如何正确对齐他们.没有太多关于CSS的知识,所以这就是我要求帮助的原因.

这是现在的情况:

这就是我想要的方式:

这是我的single_post.php代码:

<?php the_content(); ?>
<div class="clear"></div>
<?php wp_reset_query(); ?>
<?php wp_link_pages('before=<p class="pagination">&after=</p>'); ?>
<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/lt_LT/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>  
<div class="fb-like" data-send="false" data-layout="box_count" data-width="700" data-show-faces="false" data-font="lucida grande"></div>    
<div class="clear"></div>
</div>

Answer 1

嘿,我认为你应该这样做

在socail图标中定义浮动属性,并根据您的设计定义边距填充宽度高度

CSS

.social{
float:right;
    border:solid 1px green;
}
.fb, .twit, .share, .gplus{
float:left;
    width:100px;
    height:100px;
    overflow:hidden;
    border-left:solid 1px red;
}

HTML

<div class="social">
    <div class="fb">FB</div>
    <div class="twit">TWIT</div>
    <div class="share">Share</div>
    <div class="gplus">Gp</div>
</div>

现场演示http://jsfiddle.net/3ELc5/