使用 CSS 控制 Facebook Like/Send 按钮的位置
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5864194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using CSS to Control Position of Facebook Like / Send Buttons
提问by John
I am trying to position a Facebook like button (which includes a "Send" button) using CSS. Below is the code provided by Facebook along with the div tag classed "like" that I added. Below that is the corresponding CSS. The CSS I am applying does not work; it seems to be overwritten by styling inherent in Facebook's code.
我正在尝试使用 CSS 定位 Facebook 点赞按钮(包括“发送”按钮)。下面是 Facebook 提供的代码以及我添加的归类为“喜欢”的 div 标签。下面是相应的CSS。我正在应用的 CSS 不起作用;它似乎被 Facebook 代码中固有的样式覆盖。
How can I position a Facebook like button using CSS?
如何使用 CSS 定位 Facebook 点赞按钮?
Thanks in advance,
提前致谢,
John
约翰
<div class="like">
<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>
</div>
The CSS:
CSS:
.like {
position:absolute;
width:310px;
left:30px;
top:278px;
color: #004993;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
height: 15px;
padding-bottom: 0px;
padding-left: 5px;
padding-top: 2px;
}
回答by Phelan
I had the same problem. Just wrap an outside div around it and it'll work like a charm.
我有同样的问题。只需在它周围包裹一个外部 div,它就会像魅力一样工作。
<div style="float:left; margin:10px 10px 0 0;">
<div id="fb-root"></div>
<script src="yada-yada"></script>
</div>
回答by tobiasknabe
not sure, if this is still open but the only solution is, if you do it like this:
不确定,如果这仍然是开放的,但唯一的解决方案是,如果你这样做:
<div id="fb-root" class="like">
a second way is,
第二种方式是
<div id="fb-root" style="position:absolute; width:310px; left:30px; top:278px; color: #004993; font-family:Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; height: 15px; padding-bottom: 0px; padding-left: 5px; padding-top: 2px;">
回答by Pete
I was struggling with these solutions not working until I realized that Facebook's "GET CODE" wizard for the LIKE button defaults to a width of 450 pixels. I didn't pay attention to that, because the button looked OK on my site. But I finally realized that the Facebook LIKE code was grabbing a 450-pixel wide space, whether the button's info needed it or not. That is why I could not get all the various buttons to stay on the same line. Once I changed the width to 80, I did something similar to what was suggested above and it worked like a charm.
在我意识到 Facebook 的“获取代码”向导的 LIKE 按钮默认宽度为 450 像素之前,我一直在努力解决这些问题。我没有注意这一点,因为该按钮在我的网站上看起来不错。但我终于意识到 Facebook LIKE 代码占用了 450 像素宽的空间,无论按钮的信息是否需要它。这就是为什么我无法让所有不同的按钮保持在同一行上。一旦我将宽度更改为 80,我做了一些类似于上面建议的操作,它就像一个魅力。
Duh. Eat humble pie.
呃。吃简陋的馅饼。
回答by Cylex
My goal: Facebook-Follow-Button should show up to the right of a text-Label (Facebook: "Button")
我的目标:Facebook-Follow-Button 应该显示在文本标签的右侧(Facebook:“按钮”)
<div style="float:left; width:80px;">Facebook:</div>
<!-- float left + 80px, depends on text length, functions also as margin to beneath button div -->
<div style="display:inline; position:relative; top:-20; width:100px;">
<!-- div block embracing fb-root, display: inline not necessary with fb but with twitter-button; top:-20 adjusting horizonal pos. -->
<div id="fb-root"></div>
</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/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-follow" data-href="https://www.facebook.com/YOURFBLINK" data-width="150" data-colorscheme="light" data-layout="button" data-show-faces="true"></div>
<br style="clear:both;"> <!-- prevents following stuff from floating next to our FB-Button-->
... --> Other Buttons...
... --> 其他按钮...
Hope that helps folks!
希望对大家有所帮助!