如何在 WordPress 中为 Google +1 按钮设置填充/边距？

Posted 2023-03-06

【中文标题】如何在 WordPress 中为 Google +1 按钮设置填充/边距？

【英文标题】：How to set padding/margin for Google +1 button in WordPress?

【发布时间】：2012-02-21 10:25:28

【问题描述】：

http://healthybodyguru.com

如果您加载网站并等待 3 秒钟，您会看到标题中出现 attentionGrabber 栏。它有添加社交按钮（FB、Twitter、G+1）的简码，但由于某种原因，Google +1 按钮太高了。

我尝试通过在顶部添加边距/填充来添加自定义 CSS 以降低它，但这并没有什么不同。

任何想法我可以使用什么 CSS 使其与其他社交按钮对齐？

谢谢！

【参考方案1】：

尝试设置：

#___plusone_0 
    font-size: default; !important

用 !important 覆盖内联 CSS 样式。

【讨论】：

谢谢，但是当我在 Chrome 中检查元素时添加该 CSS 后，它被划掉了（未应用）

@kane 查看更新。这是一个内联样式，所以你必须强行覆盖它。

不，没有区别。

@kane 你的意思是它仍然被划掉了？我将此元素的内联样式修改为 font-size: default;在 chrome 开发者工具中，它解决了这个问题。

它没有被划掉，但按钮仍然在同一个位置。另外，为什么字体大小与按钮顶部的边距/填充有任何关系？

【参考方案2】：

解决方案是添加：

#attentionGrabberWrap .plusoneBtn iframe
   margin-bottom: -3px !important;

我从插件创建者那里得到了帮助 :)

【参考方案3】：

尝试在 google +1 按钮周围放置一个 span 标签并填充该顶部。

<span style="padding-top:5px;">[shortcode]</span>

我不知道您是否尝试过使用自定义 css，但如果不试一试，看看会发生什么。 html 中的样式标记应覆盖样式表为元素提供的任何样式。

【讨论】：

不，没有区别。

【参考方案4】：

如您所见，我喜欢 div 而不是 span。在玩 css 时，我总是从 div 中获得比 span 更好的结果。

<div id="attentionGrabber">

  <div id="centeredPart" style="width: 575px; margin:0 auto">

    <div style="float:left;" class="facebookBtn">
      ...like code....
    </div>  

    <div style="float:left;" class="twitterBtn" >
      ...twitter code...
    </div>  

    <div style="float:left;" class="plusoneBtn">
      ...+1 code...
    </div>

    <div style="float:left;" class="linkToForums">
      Check out our new forums:
      <a class="link" href="http://healthybodyguru.com/forum/">go!</a>
    </div>

    <div style="clear:both"></div>

  </div> 

 <div id="closeAttentionGrabber"></div>


</div>

【讨论】：

感谢您的努力，但这只是让它看起来很丑。 “查看我们的新论坛”文本在页面加载后立即位于弹出栏下方。 “Like”和“Tweet”按钮触到了栏的顶部，而“+1”按钮再次没有移动（此时它变得有点有趣，没有任何东西可以让它移动）。

这很奇怪，我把那个代码放到我的浏览器中，它就像你所拥有的一样，但谷歌与其他项目保持一致。我使用 firebug 实时编辑 HTML，并在此处粘贴代码。

【参考方案5】：

我只是在我的后面放了一个看不见的字母。有点hacky，但它对我有用。

<br><div class="g-plusone" data-annotation="none"></div><span style="font-size:33px;opacity:0;">G</span>