无法向右浮动 google plusone 按钮并使其正常工作答案

【问题标题】：Unable to float right the google plusone button and get it to work无法向右浮动 google plusone 按钮并使其正常工作
【发布时间】：2012-05-24 02:42:03
【问题描述】：

我有一个 div，其中包含 Facebook Like 按钮、Google plusone 和一个电子邮件按钮。我用 float:right 浮动了 div，但是 Google plusone 不再可点击。 Facebook 按钮可在按钮的 2/3 处点击。

当我从 BookContain 类中删除 float:right 时，它可以正常工作（仅在左侧）。我试过删除 float:right 并将其替换为相对定位，但 Google plusone 再次不喜欢它。

这是一个例子...http://www.giftsthatthrill.com.au/gifts/skydiving-experiences/Coolum_Beach/AD9788

块的 CSS 是

.bookcontain {
margin-top:5px;
float:right;
}
.bookcontain ul {
text-align:left;
list-style:none;
margin:0;
padding:0;
}
.bookcontain ul li{
text-align:left;
display:inline-block;
padding:0 2px 2px 0;
margin:0 0 0 5px;

}
 .bookcontain ul li.google {
vertical-align:top; 

}

我还发现 Firefox 将 Google plusone 显示在下方...这可能与上述问题有关。

任何想法将不胜感激！

【问题讨论】：

标签： css google-plus-one

【解决方案1】：

这些按钮无法点击，因为它们被选项卡 div 隐藏。

这里有一个快速的解决方法...

添加此 CSS 以将按钮放置在选项卡 div 上方：

#socialBookMarks{
    position: relative;
    z-index: 9;
}

这会将 Google+ 按钮向上移动：

.google{
    position: relative;
    top: -13px;
}

我会尽快更新 CSS 以修复按钮的位置...

【讨论】：

啊...这很有帮助。 z-index 做到了。只需检查 Google+ 按钮的位置，因为 FF 和 IE 正在做不同的事情。
我无法让 google 按钮向上移动。我试过：.google { 顶部：-13px;顶部：0px\9； } 有和没有 hack。
解决方案通过将 height:20px 添加到包含 div。非常感谢您在获得 z-index 方面的帮助......这已经是几个星期的问题......现在已经解决了。

【解决方案2】：

在您的文件中进行以下更改。

将<div style="clear:both;"></div> 放在socialBookMarks 结束除法之后。

从 CSS5.css 行号 22 中删除 vertical-align: top;

这些更改将使您的按钮保持在右侧，可点击并正确对齐。

【讨论】：

非常感谢Libin ...由于z-index隐藏了div，问题已经显现出来。增加 z-index 会将 div 置于最前面，因此它变得可点击。我现在遇到的问题是让 FF 显示 GooglePlus 对齐。
还注意到您的选项卡和内容之间存在差距。通过从第 22 行删除 vertical-align: top; 将修复它，但会弄乱里面的内容。
你是对的。删除第 22 行修复了它，但它的删除会影响很多页面，包括里面的内容。我会继续寻找解决方法。
我有一个解决方案...将 height:20px 添加到包含的 div 中。似乎在 IE、FF、Safari 和 Chrome 上都可以正常工作。只是想感谢您的指导。