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

Если вы не знаете азы 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; //делаем сплошную рамку, черного цвета
}

Все очень просто! Жду вас в следующих уроках, не забывайте подписываться и клацать соц. кнопки

Понравилась статья? Подпишись на обновления по e-mail!

5 комментариев на «“Выравниваем социальные кнопки”»

1. Костя:

   06.07.2024 в 8:38 дп

   Я начинающий програмист и мне как новичку такая роспись в действиях важна и даже очень.До конца не могу осознать всего нужного что даст это но то что это практично удобно и эстетично это уж точно.Спаибо авторам за предоставленный материал.Буду следить за новостями на вашем сайте.

   Ответить
2. Алексей:

   19.07.2024 в 7:41 пп

   Спасибо, статья помогла выровнять кнопки соц сетей)

   Ответить
3. Алексей:

   08.08.2024 в 9:43 пп

   Да, в свое время тоже с ними парился — все кнопки разные, у некоторых широченные невидимые блоки есть… В результате решил проблему при помощи табличной верстки: надо блок с кнопками сделать не div’ом, а таблицей, где каждая кнопка — в отдельной ячейке. Так они хотя бы выстраиваются в один ряд и не норовят разъехаться.

   Ответить
   • Алексей Нестерчук:

     09.08.2024 в 6:40 дп

     Я тоже так хотел сделать, но потом передумал. Это кстати отличный вариант!

     Ответить
4. Oleg:

   01.12.2024 в 2:50 пп

   Согласен с Алексеем. Таблицы позволяют жёстко задать размер под кнопку и счётчик. Но лучший вариант это сервисы соц кнопок например поделиська яндекса.

   Ответить