javascript - 无法使用 CSS 定位 Google +1 按钮？

Question

我在我的网站上定位 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 添加到值中没有任何作用。

有任何想法吗？

score 9 · Accepted Answer

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

score 2 · Accepted Answer

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

例如，在我的情况下，将按钮对齐在我放置的行的中间：

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

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

score 0 · Accepted Answer

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

抱歉，我只是将其添加为上面的评论，但我似乎无法:)

3 回答 3