Выравнивание кнопок социальных сетей по горизонтали на Tumblr

Я успешно добавил кнопки «Нравится» и «Твитнуть» в свой блог, но не знаю, как выровнять их по горизонтали после каждого сообщения. Что я пытаюсь сделать, так это поместить кнопку твита слева от кнопки «Мне нравится» в Facebook, чтобы она была красивой и аккуратной. В конце концов, я также хотел бы добавить кнопку G+.

Мой блог www.thoughtsrandom.com

Любая помощь по этому вопросу будет принята с благодарностью.

Вот код. Я разместил после {/block:PostNotes}

<div id="fb-root"></div>

<script>(function(d){

var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}

js = d.createElement('script'); js.id = id; js.async = true;

js.src = "//connect.facebook.net/en_US/all.js#appId=236186013100076&xfbml=1";

d.getElementsByTagName('head')[0].appendChild(js);

}(document));</script>

<div class="fb-like" data-href="{permalink}" data-send="true" data-width="450" data-show-  faces="true"></div>

<a href="https://twitter.com/share" class="twitter-share-button" data-via="nhuntzinger">Tweet</a>
<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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

person Nathaniel Huntzinger    schedule 14.03.2012    source источник
comment
вы можете сделать это очень легко, изменив ширину и положение элементов. позвольте мне добавить кнопку G+ для демонстрации.   -  person w3uiguru    schedule 14.03.2012


Ответы (1)


Проверьте приведенную ниже скрипку и установите элементы в соответствии с вашими потребностями, вы можете легко выполнить это без каких-либо хлопот.

Скрипка: http://jsfiddle.net/pVaLL/1/

Демонстрация: http://jsfiddle.net/pVaLL/1/embedded/result/

person w3uiguru    schedule 14.03.2012
comment
Благодарю за ваш ответ. Выравнивание правильное; однако сами кнопки больше не работают. Кроме того, когда мне нравится одна кнопка, остальные мои посты тоже лайкаются. - person Nathaniel Huntzinger; 14.03.2012
comment
Я просто скопировал ваш код с упомянутого выше веб-сайта, чтобы показать вам демонстрацию, у меня не было реального кода, поэтому я показал вам демонстрацию на скрипке, чтобы вы могли видеть и разрабатывать в соответствии с вашими потребностями. - person w3uiguru; 14.03.2012
comment
Спасибо. Как вы понимаете, я новичок в этом. - person Nathaniel Huntzinger; 15.03.2012