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

[ольга2013]

Подскажите пожалуйста есть кнопки от яндекса вставляю в код а они вертикально стоят и все, а надо горизонтально как их положить горизонтально?

<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>

 

[Serg12333]

дай ссылку на страницу, иначе не разобраться, код верный, показывает нужный тебе результат - Для просмотра ссылки Войди или Зарегистрируйся

 

[ольга2013]

дай ссылку на страницу, иначе не разобраться, код верный, показывает нужный тебе результат - Для просмотра ссылки Войди или Зарегистрируйся

Уже решила вот таким может не совсем гуманным способом но работает .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>

 

[tovGANs]

display: inline-flex; - не использовала бы ты это правило. Оно будет работать не везде.
Можно на тег с иконкой прописать float: left; и заменить display: table на block или inline-block

 

[dopings]

Подскажите пожалуйста есть кнопки от яндекса вставляю в код а они вертикально стоят и все, а надо горизонтально как их положить горизонтально?
Посмотреть вложение 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, то кнопки будут горизонтально.

 

[kosolapow]

Если ширины контейнера для элементов не хватает, то они переносятся и выстраиваются вертикально. Установите достаточную ширину в px.

Так же можно указать стили контейнеру:

• display: flex;
• flex-flow: row nowrap;

 

[Didi]

Да флекс на более устаревших версиях браузеров работать не будет. Я люблю решать подобные задачи так:

.b-share {
display: inline-block;
vertical-align: top;
}

 

[kosolapow]

При использовании inline-block появляются дополнительные отступы. Чтобы их убрать у родителя ставьте font-size: 0, а у потомков восстанавливайте размер шрифта.

 

[Didi]

При использовании inline-block появляются дополнительные отступы. Чтобы их убрать у родителя ставьте font-size: 0, а у потомков восстанавливайте размер шрифта.

+1
Правда конкретно в данном случае эти отступы будут как раз к месту ))