Не удалось выровнять социальные кнопки по горизонтали

Прежде всего, и прежде чем кто-то закроет этот вопрос как «точная копия», я искал на сайте ответ и не смог найти ничего, что могло бы помочь :)

У меня есть веб-страница с социальной панелью, которая выглядит как социальная панель Bootstrap на их главной странице. Мой сайт использует Bootstrap в качестве шаблона сайта.

Моя проблема с социальными кнопками. Я добавил кнопку Google+, Twitter и Facebook, и теперь мне трудно правильно настроить... благодаря кнопке Facebook.

Код, который я использую, является точно таким же официальным кодом из 3 социальных сетей, и я поместил каждую кнопку в <li> из <ul> (опять же, обратитесь к Bootstrap для примера на первой странице). Примечание. Я добавил цвет фона и отступы, чтобы все было понятно.

Результатом этого является изображение, которое вы видите ниже (скриншот из IE). Google+ и Twitter хорошо работают, в то время как Facebook усложняет ситуацию... или все наоборот?

Социальные кнопки

Это то же самое поведение во всех браузерах, которые я использовал для тестирования (IE, Firefox, Chrome и Opera).

ОБНОВЛЕНИЕ. Посетите этот Fiddle, чтобы увидеть пример.


person TheBlueSky    schedule 26.10.2012    source источник
comment
@CBroe, я добавил ссылку на пример.   -  person TheBlueSky    schedule 26.10.2012


Ответы (1)


Прежде всего, LI имеют разную высоту — G+ и Twitter имеют размер 25 пикселей, а кнопка «Мне нравится» в FB — всего 22 пикселя. Сделайте все LI одинаковой высоты, добавив для них height:25px в таблицу стилей.

После этого просто установите vertical-align:middle для LI, и они должны хорошо выровняться.

person CBroe    schedule 26.10.2012