2012-04-26 4 views
1

У меня есть интернет-портал, основанный на 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> 
+0

[Static Социальные кнопки с анимацией] (http://www.jquery2dotnet.com/2014/01/static-social-button-with-animation.html) – Sender

+0

[Фиксированный Vertical социального Share Button] (http://www.jquery2dotnet.com/2014/09/fixed-vertical-social-share-button.html) – Sender

ответ

6

Эй я думаю, что вы должны сделать, это

Определение свойств поплавка в вашем 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/

+0

Где находится галочка? Это лучший ответ! –