【问题标题】:Google+ button remove free space/margin to the right | align to rightGoogle+ 按钮删除可用空间/右侧边距 |向右对齐
【发布时间】:2011-08-24 11:43:23
【问题描述】:

有什么办法可以让谷歌加号按钮向右对齐吗?如果有更多数字,g+ 按钮似乎有一些位置。如果 sulution 只能使用 css/html - 不使用 javascript,那就太好了。

更新
google 从昨天开始好像对 1+ 按钮的 api 做了一点改动,但似乎还是无法向右对齐。

更新 2
问题已于 2011 年 8 月 24 日提出。从那时起,Google+ 发生了数次变化。不再需要向这篇文章发送垃圾邮件答案(重复,同样的答案!)。你们都建议的选项当时不存在。查看 google+ 文档网页上的参数:https://developers.google.com/+/plugins/+1button/?hl=pl#plusonetag-parameters

【问题讨论】:

    标签: javascript css google-plus google-plus-one


    【解决方案1】:

    现在您只需将data-align="right" 添加到您的<div>。例如:

    <div class="g-plusone" data-align="right" data-size="medium" data-href="http://www.mywebsite.com"></div>
    

    这将使&lt;iframe&gt; 的内容保持向右对齐。

    【讨论】:

    • 退房日期问题已发布。从那时起,google+ api 已多次更改,问题不再有效。
    • 这是一个老问题,但我还是到了这里,因为我不知道如何右对齐 Google+ 按钮,所以为了帮助其他人,把它放在这里很有意义。
    【解决方案2】:

    如果您想将 +1 按钮右对齐,则应使用“高”外形尺寸,因为它会向上展开,或者将 +1 按钮配置为不显示计数。这些中的任何一个都将删除右侧数字的松弛空间。可以在此处找到解释如何执行此操作的文档:http://code.google.com/apis/+1button/#button-sizes

    现在右侧的内边距消失了,您可以使用 CSS 来对齐按钮。

    【讨论】:

      【解决方案3】:

      将以下属性添加到 g:plusone 标签:

      align="right"
      

      https://developers.google.com/+/plugins/+1button/#button-sizes

      【讨论】:

        【解决方案4】:

        将 +1 按钮标签的 align 属性设置为 right

        <g:plusone align="right"></g:plusone>
        

        【讨论】:

        • 自从我问了这个问题后,Google+ 按钮发生了变化(很多次)。这个选项一年前不存在。 :)
        【解决方案5】:

        我找到的最简单的解决方案是将加号按钮 div 包装在一个容器中,为容器提供一个类和样式,以根据需要浮动。

        <!-- Google +1 button -->
        <div class="plusonealign"><div class="g-plusone" data-size="medium"  data-align="left"></div></div>
        
        .plusonealign {
            float: left;
        }
        

        【讨论】:

          【解决方案6】:

          昨天遇到了这个确切的问题。将命名空间加一个标签包装在一个 div 中并向右浮动。

          您总是可以使用样式表来覆盖 google 发送的内联样式

          所以对于这样的标记:

          <div class="myPlusOneWrapper">
              <div id="theActualPlusOneWrapper" style="whatever google send down the wire">
                  <!-- blah -->
              </div>
          </div>
          

          你可以有这个 CSS:

          .myPlusOneWrapper
          {
               float: right;
          }
          
          .myPlusOneWrapper > div
          {
              width: auto !important;
          }
          

          然后宽度将适应所需的宽度,并优先于 google 的内联样式

          JS Fiddle

          【讨论】:

          • 我无法让它工作。你能举个例子吗?也许是 jsfiddle。
          • 您使用的是什么浏览器? &gt; 后代选择器仅适用于较新的浏览器(IE8+,大多数其他浏览器已支持一段时间)
          • hmmm 经过多次徒劳的尝试,我唯一能做的就是在包装器上设置一个明确的宽度(我觉得自己失败了哈哈)。您是否真的认为您将拥有那么多加 1,以至于您没有时间通过​​对 css 的简单更改来定期调整大小? jsfiddle.net/j65Wu
          • 我在所有公司网站上每天都有 5 000 000 次独立访问。每个网站上的每篇文章都可以被点赞或 +1。我没有办法手动更新它。
          • 每天 500 万个独立用户?!令人印象深刻的数字!嗯,你可以关闭注释,这样编号就不是问题了吗?我的猜测是,这并不像第一个假设那样容易做到。谷歌在电线上发送一个明确的宽度的事实说明了一切,他们没有动态调整它的大小!或者只是将宽度设置为足够大以容纳多达一百万个+1(一个公平的上限)。例如,这可能只需要右侧 100 像素的空间
          【解决方案7】:

          我会尝试将按钮放入div。然后我会让这个div 比按钮小,以切掉按钮的右侧部分。您需要在您的 css 中调整 positionoverflow 选项。

          【讨论】:

          • 如果网页(在一段时间内)获得 4 位数的 +1 会发生什么?我不想每隔一段时间手动更新这个 div 的宽度。