Как сделать кнопки соц сети горизонтально?

Тема в разделе "Верстка", создана пользователем ольга2013, 7 янв 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. ольга2013

    ольга2013 Постоялец

    Регистр.:
    10 ноя 2013
    Сообщения:
    133
    Симпатии:
    13
    Подскажите пожалуйста есть кнопки от яндекса вставляю в код а они вертикально стоят и все, а надо горизонтально как их положить горизонтально?
    Scr784t.png
    <style type="text/css">
    .tablica {
    display: table;
    width: 100%;
    border-spacing: 10px 10px;
    }
    .yacheika {
    display: table-cell;
    width:200px;
    height:10px;
    padding: 10px;
    }
    </style>

    <div class="tablica">
    <div class="yacheika"><script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="small" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter"></div></div>
    </div>
     
  2. Serg12333

    Serg12333 Создатель

    Регистр.:
    1 май 2013
    Сообщения:
    31
    Симпатии:
    2
    дай ссылку на страницу, иначе не разобраться, код верный, показывает нужный тебе результат - Перейти по ссылке
     
  3. ольга2013

    ольга2013 Постоялец

    Регистр.:
    10 ноя 2013
    Сообщения:
    133
    Симпатии:
    13
    Уже решила вот таким может не совсем гуманным способом но работает .b-share это часть скрипта Яндекса после загрузки
    <style>
    .b-share {
    display: inline-flex;
    }
    </style>

    <script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,lj,friendfeed,gplus"></div>
     
  4. tovGANs

    tovGANs Создатель

    Регистр.:
    19 июн 2012
    Сообщения:
    33
    Симпатии:
    3
    display: inline-flex; - не использовала бы ты это правило. Оно будет работать не везде.
    Можно на тег с иконкой прописать float: left; и заменить display: table на block или inline-block
     
  5. dopings

    dopings Писатель

    Заблокирован
    Регистр.:
    10 май 2014
    Сообщения:
    1
    Симпатии:
    0
    У вас какой то конфликт на странице скорей всего. Либо не правильно сверстано. Если код который вы дали вставить в пустой html, то кнопки будут горизонтально.
     
  6. kosolapow

    kosolapow

    Регистр.:
    4 окт 2016
    Сообщения:
    201
    Симпатии:
    409
    Если ширины контейнера для элементов не хватает, то они переносятся и выстраиваются вертикально. Установите достаточную ширину в px.

    Так же можно указать стили контейнеру:
    • display: flex;
    • flex-flow: row nowrap;
     
    Последнее редактирование: 5 окт 2016
  7. Didi

    Didi Создатель

    Регистр.:
    16 окт 2013
    Сообщения:
    42
    Симпатии:
    12
    Да флекс на более устаревших версиях браузеров работать не будет. Я люблю решать подобные задачи так:
    Код:
    .b-share {
    display: inline-block;
    vertical-align: top;
    }
     
  8. kosolapow

    kosolapow

    Регистр.:
    4 окт 2016
    Сообщения:
    201
    Симпатии:
    409
    При использовании inline-block появляются дополнительные отступы. Чтобы их убрать у родителя ставьте font-size: 0, а у потомков восстанавливайте размер шрифта.
     
  9. Didi

    Didi Создатель

    Регистр.:
    16 окт 2013
    Сообщения:
    42
    Симпатии:
    12
    +1
    Правда конкретно в данном случае эти отступы будут как раз к месту ))