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

ольга2013

Постоялец
Регистрация
10 Ноя 2013
Сообщения
134
Реакции
15
Подскажите пожалуйста есть кнопки от яндекса вставляю в код а они вертикально стоят и все, а надо горизонтально как их положить горизонтально?
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>
 
дай ссылку на страницу, иначе не разобраться, код верный, показывает нужный тебе результат - Для просмотра ссылки Войди или Зарегистрируйся
 
дай ссылку на страницу, иначе не разобраться, код верный, показывает нужный тебе результат - Для просмотра ссылки Войди или Зарегистрируйся
Уже решила вот таким может не совсем гуманным способом но работает .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>
 
display: inline-flex; - не использовала бы ты это правило. Оно будет работать не везде.
Можно на тег с иконкой прописать float: left; и заменить display: table на block или inline-block
 
  • Заблокирован
  • #5
Подскажите пожалуйста есть кнопки от яндекса вставляю в код а они вертикально стоят и все, а надо горизонтально как их положить горизонтально?
Посмотреть вложение 59615
<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>
У вас какой то конфликт на странице скорей всего. Либо не правильно сверстано. Если код который вы дали вставить в пустой html, то кнопки будут горизонтально.
 
Если ширины контейнера для элементов не хватает, то они переносятся и выстраиваются вертикально. Установите достаточную ширину в px.

Так же можно указать стили контейнеру:
  • display: flex;
  • flex-flow: row nowrap;
 
Последнее редактирование:
Да флекс на более устаревших версиях браузеров работать не будет. Я люблю решать подобные задачи так:
Код:
.b-share {
display: inline-block;
vertical-align: top;
}
 
При использовании inline-block появляются дополнительные отступы. Чтобы их убрать у родителя ставьте font-size: 0, а у потомков восстанавливайте размер шрифта.
 
При использовании inline-block появляются дополнительные отступы. Чтобы их убрать у родителя ставьте font-size: 0, а у потомков восстанавливайте размер шрифта.
+1
Правда конкретно в данном случае эти отступы будут как раз к месту ))
 
Назад
Сверху