【问题标题】:How to set padding/margin for Google +1 button in WordPress?如何在 WordPress 中为 Google +1 按钮设置填充/边距?
【发布时间】:2012-02-21 10:25:28
【问题描述】:

http://healthybodyguru.com

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

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

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

谢谢!

【问题讨论】:

    标签: css wordpress padding margin google-plus-one


    【解决方案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>
      

      【讨论】:

        猜你喜欢
        • 2011-03-14
        • 1970-01-01
        • 2018-08-03
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-06-18
        • 1970-01-01
        相关资源
        最近更新 更多