Социальные кнопки друг над другом, а не рядом друг с другом в Drupal

Question

Я борюсь с проблемой CSS. Я хочу отобразить кнопку Google +1 рядом с кнопками ShareThis (я использую Drupal).

По какой-то причине Drupal добавляет класс CSS для searator панели:

Я попытался изменить свой файл CSS следующим образом:

.panel-separator { display: none; }

но это только произвело это:

Справа от кнопок ShareThis достаточно места для отображения кнопок Google +1. Но кнопки расположены друг над другом.

Как получить кнопку для выравнивания по горизонтали? Благодаря.

Обновление

Я установил большую ширину, а также добавил float: left;:

.GYPO_social_buttons {
    padding-top: 91px;
    width: 200px;
    float: left;
}

.GYPO_share_this {
    width: 90px;
}

.GYPO_google_plus_one {
    width: 40px;
}

Вот вложение div в соответствии с firebug (я использую Firefox):

Обновление II

Woops, мой плохой. Теперь я установил float: left; на кнопку, а не на div, и проблема решена. Спасибо !!!

.GYPO_share_this {
    width: 90px;
    float: left;
}

.GYPO_google_plus_one {
    width: 40px;
    float: left;
}

Answer 1

Вам нужно указать достаточную ширину контейнера div, в котором находятся эти значки.После этого вы можете всплывать эти значки, давая float: left;.Причина, по которой Google +1 перемещается вниз, заключается в том, что у контейнера div недостаточно ширины, чтобы разместить его рядом со значком почты.

Answer 2

Из предоставленной вами части html и css немного сложно найти лучший способ сделать это. Вопрос в том, что порождает разрыв. Может быть так, что родительский элемент недостаточно широк, и +1 должен быть ниже. В этом случае вы можете просто изменить ширину. Также может быть, что есть css, который генерирует разрыв (например, display: block и no float для eof элементов). В этом случае вы можете попытаться изменить это на display: inline или float: left для кнопок. Где-то там может быть зазор, который может привести к поломке поплавка (хотя на изображении он не выглядит как пятно)

Я полагаю, что есть больше возможностей ...

Answer 3

Я был в той же ситуации один раз. Вот что решило мою проблему:

Вы также можете выбрать настройку «стиль» для региона и выбрать «Без разметки вообще». Это удалит разделитель панели.

Для получения дополнительной информации: https://www.drupal.org/node/579020#comment-8163459

Answer 4

Мне нужно увидеть больше вашего кода. Если бы вы попытались увеличить свой контейнер, чтобы вместить все значки, и это не сработало, я думаю, это был еще один элемент, заставляющий значок перейти к следующей строке. Без большего количества кода все, что я могу сделать, это сделать предположение ...