Question

我正在尝试将社交按钮添加到我的网站，而我无法将google + 1按钮更接近其他社交按钮。它只是在div的最左边。

我已经在Jsfiddle中提出了代码，请看一下

以下是它如何看待我的结尾 The social media icons 了解Google +按钮如何位于最左侧

JSFiddle here http://jsfiddle.net/LYYhj/3/

代码 - HTML部分

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=291527307526682";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<article class="grid_6">
            <div class="wrapper">
              <ul class="ul-1">
                <li><!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="120" data-href="http://www.xgen-hosting.com" style="float:right;"></div>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script></li>
                <li><a href="https://twitter.com/XgenHosting" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @XgenHosting</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li>
                <li><div class="fb-like" data-href="http://www.xgen-hosting.com/" data-width="120" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></li>
              </ul>
            </div>
          </article>

CSS部分

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
    display:inline;
    float:left;
    position:relative;
    margin:0 10px
}
.wrapper{overflow:hidden;position:relative;}
.ul-1 {
    overflow:hidden;
    float:right;
    padding:48px 3px 0 0;
}
.ul-1 li {
    float:left;
    font-size:12px;
    line-height:15px;
    font-family: 'Droid Sans', sans-serif;
    text-transform:uppercase;
    text-shadow: 0 1px rgba(0,0,0, 0.6);
    background:url(../images/ul-1.png) left 3px no-repeat;
    margin-left:8px;
    padding-left:8px;
    color:#ddd;
}
.ul-1 li:first-child {
    background:none;
    padding:0;
    margin:0;
}
.ul-1 li a {
    color:#ddd;
}
.ul-1 li a:hover {
    color:#f04011;
    text-decoration:none;
}

此外，当我将代码实施到我的页面时，google + 1按钮会向上移动一点，无论我做什么，我都无法将其与其他社交按钮对齐。

链接到页面http://www.xgen-hosting.com

Answer 1

以下两种方法可以做到这一点。

方法1：如果您在浏览器中检查元素google +按钮并查看<li>元素的代码，您可以看到google plus按钮的宽度为120px，减少它将使您的google +按钮与其他<li>按钮对齐。

以下是我想说的内容以及我尝试使用此方法的内容。

This is the inspect element part:

这是我得到的结果：

enter image description here

现在，第二种方法，如果上面的方法不起作用：

将列表设为position: absolute;这样您就可以按任意方式定位按钮。

如果您不想在页面上放置绝对定位的元素（因为位置会根据屏幕大小而有所不同），那么您可以简单地将绝对位置列表放在<div>的位置内相对。

Google +按钮无法正常显示

1 个答案: