За последние 24 часа нас посетили 8513 программистов и 449 роботов. Сейчас ищут 124 программиста ...

Как выровнить кнопки соц сетей

Тема в разделе "HTML и CSS", создана пользователем tiamin, 11 янв 2017.

  1. tiamin

    tiamin Новичок

    С нами с:
    1 дек 2016
    Сообщения:
    25
    Симпатии:
    6
    Не получается выровнить кнопки-лайки от соцсетей, вроде все делаю правильно, но кнопка от facebook не хочет повиноваться. Получается следующее (снизу). Что с ней нужно сделать?
    ыщссссс.png

    CSS мой:
    Код (Text):
    1. .social_likes{
    2. height: 25px;
    3. margin: 10px;
    4. width: 450px;
    5. }
    6. .ok{
    7. float: left;
    8. }
    9. .vk{
    10. float: left;
    11. }
    12. .fb{
    13. float: left;
    14. }
     
  2. Fell-x27

    Fell-x27 Старожил
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    9.735
    Симпатии:
    1.040
    Адрес:
    :сердА
    1) Отказаться от float;
    2) Контейнер с кнопками сделать display:flex, justify-content:space-between, align-items:center;
    3) Каждой кнопке сделать div-контейнер, хотя, кажется, ты это уже сделал;
    4) Каждому контейнеру поставить margin:auto;
    5) Посмотреть, что получится.
     
    tiamin нравится это.
  3. tiamin

    tiamin Новичок

    С нами с:
    1 дек 2016
    Сообщения:
    25
    Симпатии:
    6
    Стало немного получше
    ыщссссс.png
     
  4. Fell-x27

    Fell-x27 Старожил
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    9.735
    Симпатии:
    1.040
    Адрес:
    :сердА
    Нда, все равно по высоте скачут.. А можете скинуть прям щас страницу с ними? С которой скрины сняты.
     
  5. tiamin

    tiamin Новичок

    С нами с:
    1 дек 2016
    Сообщения:
    25
    Симпатии:
    6
  6. Fell-x27

    Fell-x27 Старожил
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    9.735
    Симпатии:
    1.040
    Адрес:
    :сердА
    Добавьте в конец CSS на странице:

    Код (CSS):
    1. #ok_shareWidget, .fb_iframe_widget, #vk_like{
    2. display: flex;
    3. }
    --- Добавлено ---
    Ну и да, они будут равномерно занимать всю ширину общего контейнера. Если их надо как-то сгруппировать, можете рулить этой шириной. А можете через отступы и justify-content.
     
    tiamin нравится это.
  7. tiamin

    tiamin Новичок

    С нами с:
    1 дек 2016
    Сообщения:
    25
    Симпатии:
    6
    Спасибо, стало еще ровнее немного) думаю мне пойдет))
    ыщссссс.png
     
  8. Fell-x27

    Fell-x27 Старожил
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    9.735
    Симпатии:
    1.040
    Адрес:
    :сердА
    Так...что-то не так. Должно быть идеально ровно. У меня так:
    upload_2017-1-11_22-11-5.png
    --- Добавлено ---
    Фейсбук выкабенивается и перепиливает стили. Окей. И против такого лома есть прием.
    Код (CSS):
    1. #ok_shareWidget, .fb_iframe_widget, #vk_like{
    2. display: flex !important;
    3. }
     
    tiamin нравится это.
  9. tiamin

    tiamin Новичок

    С нами с:
    1 дек 2016
    Сообщения:
    25
    Симпатии:
    6
    Просто супер! Теперь все идеально:
    Image 7.png

    Спасибо Fell-x27!
     
  10. Fell-x27

    Fell-x27 Старожил
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    9.735
    Симпатии:
    1.040
    Адрес:
    :сердА
    На здоровье :)