如何在右侧对齐Facebook，Twitter，Google+和LinkedIn按钮？

我有互联网门户，基于WordPress。有一个Facebook Like按钮（对齐 - 右键），但是当我尝试整合其他按钮（Twitter，LinkedIn和Google+）时，他们会左侧。我不知道如何将它们全部对齐。没有太多有关CSS的知识，所以这就是为什么我要求帮助。如何在右侧对齐Facebook，Twitter，Google+和LinkedIn按钮？

现在这是怎么回事：

这是我希望它是：

这是我的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>

来源

2012-04-26 Paulius Vitkus

[静态社交按钮动画]（http://www.jquery2dotnet.com/2014/01/static-social-button-with-animation.html） – Sender 2014-11-14 03:04:12

[固定的垂直社交分享按钮]（http://www.jquery2dotnet.com/2014/09/fixed-vertical-social-share-button.html） – Sender 2014-11-14 03:04:42

嘿，我认为你应该做这个

根据你的设计

在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/

来源

2012-04-27 09:02:19

复选标记在哪里？这是最好的答案！ – 2012-06-10 19:33:02

如何在右侧对齐Facebook，Twitter，Google+和LinkedIn按钮？

回答

相关问题