1

我有基于 WordPress 的互联网门户。有一个 Facebook Like 按钮（对齐 - 右），但是当我尝试在右侧集成其他按钮（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>
4

1 回答 1

6

嘿，我认为你应该这样做

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

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-27T09:02:19.620 回答