在 Drupal 中，社交按钮彼此重叠，而不是彼此相邻答案

【问题标题】：Social buttons on top of each other rather than next to each other in Drupal在 Drupal 中，社交按钮彼此重叠，而不是彼此相邻
【发布时间】：2012-02-27 14:49:52
【问题描述】：

我正在努力解决 CSS 问题。我想在 ShareThis 按钮旁边显示一个 Google +1 按钮（我正在使用 Drupal）。

出于某种原因，Drupal 添加了一个面板分隔 CSS 类：

我尝试修改我的 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（我使用的是Firefox）：

更新二

糟糕，我的错。我现在在按钮本身上设置了float: left;，而不是封闭的div，问题就解决了。谢谢！！！

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

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

【问题讨论】：

标签： css drupal button html

【解决方案1】：

您需要为容器 div 提供足够的宽度，即容纳这些图标。之后，您可以通过提供 float: left; 来浮动这些图标。 Google +1 向下移动的原因是容器 div 没有足够的宽度来容纳邮件图标旁边的这个。

【讨论】：

我已经尝试过您的建议，但没有解决问题。请参阅我的问题中的更新。谢谢。

【解决方案2】：

从您提供的 html 和 css 部分，很难找出最好的方法。问题是什么产生了中断。可能是父元素不够宽，+1 需要在下方。在这种情况下，您可以简单地更改宽度。也可能是有生成中断的 css（例如 display: block 和 no float for on eof 元素）在这种情况下，您可能会尝试将其更改为 display: inline 或 float: left 用于按钮。那里可能有一个清晰的地方会导致浮动中断（虽然它看起来不像图像上的清晰）

我想还有更多的可能性......

【讨论】：

【解决方案3】：

我需要查看更多您的代码。如果你试图让你的容器更大以容纳所有的图标，但那不起作用，我猜这是另一个元素迫使图标到下一行。没有更多的代码，我所能做的就是猜测......

【讨论】：

【解决方案4】：

我曾经遇到过同样的情况。这就是解决我的问题的方法：

您也可以选择区域上的“样式”设置，然后选择“完全无标记”。这将删除面板分隔符。

欲了解更多信息：https://www.drupal.org/node/579020#comment-8163459

【讨论】：