无法使用 CSS 定位 Google +1 按钮？答案

【问题标题】：Cannot position Google +1 button with CSS?无法使用 CSS 定位 Google +1 按钮？
【发布时间】：2014-11-21 19:21:52
【问题描述】：

我在我的网站上定位 Google +1 按钮时遇到了一些问题。 div如下：

<div class="g-plusone"></div>

我使用的 CSS 非常简单：

.g-plusone
{ 
position: absolute; 
top:95px;
left:715px; 
}

尽管看起来很简单，但它简单并不想移动。

我知道有问题的 div 正在被访问。奇怪的是，其他社交分享按钮，例如下面的 FB 遵循相同的语法并且位置完美。

.fb-like 
{
position: absolute; 
top:62px;
left:715px; 
}

不幸的是，将 !important 添加到值中没有任何作用。

有什么想法吗？

【问题讨论】：

【解决方案1】：

当 Google 加载 +1 按钮时，.g-plusone 类似乎消失了，因此请尝试将此 DIV 放入另一个 DIV 中，如下所示：

HTML：

<div class="google-button">

    <div class="g-plusone"></div>

</div>

CSS：

.google-button
{ 
position: absolute; 
top:95px;
left:715px; 
}

【讨论】：

【解决方案2】：

页面加载后，名为 g-plusone 的 Google div 会变成大量代码，但是，您可以使用生成的 id 来操作此按钮。

以我为例，将按钮对齐在我放置的行的中间：

 #___plusone_0{
    vertical-align: middle !important;
}

注意：id ___plusone_0是google代码生成的id。用这个 id 做任何你想做的事。

【讨论】：

【解决方案3】：

使用 Firebug 之类的工具来确保您定位到正确的元素。 +1 按钮嵌套非常深，因此您很可能需要进一步查看 DOM 树才能找到它的最外层包装器。您无需使用 !important 或其他任何东西就可以设置它的位置，所以我肯定会先检查一下。

对不起，我只是在上面添加了这个作为评论，但我似乎不能:)

【讨论】：