Question

我一直很难定位Facebook Like＆amp;发送按钮组合。我终于能够使用表格和CSS控制垂直定位。代码和CSS如下。现在，我无法控制水平定位。无论我做什么，Like按钮距离浏览器左侧大约7个像素。即使我在Facebook代码之前的列中放置了少量&nbsp，Like按钮距离屏幕左侧只有7个像素。我正在使用的代码和CSS如下所示，它们不会更改Facebook Like和Send按钮的水平位置。

任何想法如何移动Facebook Like＆amp;从屏幕左侧发送100个像素的按钮？

提前致谢，

约翰

代码：

<table class="like">
<tr>
<td>
</td>
<td>

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

</td>

</tr>

</table>

CSS：

table.like {
    margin-top: 140px;
    margin-left: 50px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: #000000;
    width: 450px;
    table-layout:fixed;
    background-color: #FFFFFF;
    border: 2px #FFFFFF;
    border-collapse: collapse;
    border-spacing: 0px;
    padding: 0px;
    text-decoration: none;
    vertical-align: text-bottom;    

}

table.like td {
   border: 0px solid #fff;  
   text-align: left; 
   height: 10px;
   width:100px;


}

Answer 1

FB脚本将代码插入元素fb-root的子代。您要用于定位元素的任何CSS都应该应用于fb-root。这将消除对表的需要。

Answer 2

取出空的＃fb-root div标签并关闭标签，并将它们直接放在开始的身体标签之后。

然后将脚本包装在你喜欢的div和class中，不管你喜欢什么。

<body>
  <div id="fb-root">
  </div>
    <div id="wrapper">
       <div id="socialMedia">
             <-- fb button script -->
        </div>
    </div>
 </body>

控制Facebook按钮的水平定位

2 个答案: