Question

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

出于某种原因，Drupal添加了一个小组海员CSS类：

enter image description here

我尝试修改我的CSS文件如下：

.panel-separator { display: none; }

但它只产生了这个：

enter image description here

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

根据firebug（我正在使用Firefox），这是封闭的div：

enter image description here

更新II

伍兹，我的坏人。我现在已经在按钮上设置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并且没有浮动元素）在这种情况下你可能会尝试改变它来显示：inline或float：left for buttons。在那里可能有一个明显的地方会导致浮动破坏（虽然它看起来不像图像上的清晰）

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

Answer 3

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

Answer 4

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

您还可以选择区域中的“样式”设置，然后选择“根本没有标记”。这将删除面板分隔符。

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

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

4 个答案: