После установки социальных кнопок себе на сайт, неплохо было б их выставить в одну строку. Для этого будим рассматривать пример, который я сделал для своего блога. Может это не самый лучший пример, который вы можете найти в интернете, но мне он показался лучшим, чем остальные, которые я видел.
Если вы не знаете азы css, ничего страшного, я буду все описывать, в этом сложного ничего нет!
Все кода, которые я ставил для отображение кнопок у меня находится в файле single.php, я его открываю и там у меня код с таких соц.сетей
….
Код VK
Код Twitter
Код Facebook
Код Gplus
….
Теперь создадим отдельные классы для каждой кнопки, в этом же файле (класс создается вот так <div class=”название класса”> закрывается тегом </div>)
<div class="soc">
<div class="vk">
Код VK
</div>
<div class="tw">
Код Twitter
</div>
<div class="fb">
Код Facebook
</div>
<div class="gp">
Код Gplus
</div>
</div>После того как каждой кнопочке мы дали класс, открываем файл style.css и будем описывать эти же классы
.soc
{
overflow:hidden; // Отображается только область внутри элемента, остальное будет скрыто
}
.twit
{
float:left; //говорим ему, что б оно стояло слева
margin-left:50px; //отступ с лева 50px
}
.Vko
{
float:left;//отображение слева
}
.Gp
{
float:left;
}
.Fb
{
float:right; //отображение справа
}Если у вас как то не понятно отображаются кнопки, поменяйте отступы. А если и это не помогло тогда посмотрите ширину вашей кнопки, может она слишком большая. Например, вы хотите посмотреть какой длины у вас кнопка vk, для этого
.Vko
{
float:left;//отображение слева
border:1px solid black; //делаем сплошную рамку, черного цвета
}Все очень просто! Жду вас в следующих уроках, не забывайте подписываться и клацать соц. кнопки 
Я начинающий програмист и мне как новичку такая роспись в действиях важна и даже очень.До конца не могу осознать всего нужного что даст это но то что это практично удобно и эстетично это уж точно.Спаибо авторам за предоставленный материал.Буду следить за новостями на вашем сайте.
Спасибо, статья помогла выровнять кнопки соц сетей)
Да, в свое время тоже с ними парился — все кнопки разные, у некоторых широченные невидимые блоки есть… В результате решил проблему при помощи табличной верстки: надо блок с кнопками сделать не div’ом, а таблицей, где каждая кнопка — в отдельной ячейке. Так они хотя бы выстраиваются в один ряд и не норовят разъехаться.
Я тоже так хотел сделать, но потом передумал. Это кстати отличный вариант!
Согласен с Алексеем. Таблицы позволяют жёстко задать размер под кнопку и счётчик. Но лучший вариант это сервисы соц кнопок например поделиська яндекса.