右键调整Facebook的按钮iFrame的内容？ [英] Right-align the contents of a Facebook like-button iFrame?
问题描述
我需要正确对齐Facebook Like按钮的内容，以便他们总是坐在他们设置的宽度的行车侧。我可以在Firebug中通过将表设置为float：right;但是如果我在CSS中定义了这个值，它似乎不起作用。
图像解释我的问题：
编辑：这是一个JSFiddle： http://jsfiddle.net/h66z3/2/
由于您使用的是button_count布局，上班。基本上你只需要等待iframe插入，然后将其宽度设置为0.然后，它将自动调整大小到适当的大小。在所有情况下，我都不能发誓这些作品，但是请仔细检查，看看它是否适合你。以下是一个示例代码页：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtmlxml：lang =enlang =en>
< head>
< script type ='text / javascript'>
函数loadcode（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;
fjs.parentNode.insertBefore（js，fjs）;
}
函数init（）
{
loadcode（document，'script'，'facebook-jssdk'）;
setTimeout（initx，10）;
}
函数initx（）
{
likeframe = document.getElementById（'d2'）。getElementsByTagName（'iframe'）[0];
if（likeframe）setTimeout（setwidth，10）;
else setTimeout（initx，10）;
}
函数setwidth（）
{
likeframe = document.getElementById（'d2'）。getElementsByTagName（'iframe'）[0];
likeframe.style.width ='0';
}
< / script>
< / head>
< body onload ='init（）'style ='margin：10px 50px'>
< div id =fb-root>< / div>
< div style ='text-align：right'>这是一些与...对应的右对齐文本。< / div>
< div id ='d2'style ='float：right'>
< div class =fb-likehref =http://www.google.comdata-send =falsedata-layout =button_countdata-width =90data-显示-面= 假 >< / DIV>
< / div>
< / body>
< / html>
不幸的是，这不符合标准布局，不知道为什么会有这么差异。 >
I need to right align the contents of a Facebook Like button so that they always sit against the ride side of their set "width". I can do this in Firebug by setting the table to float: right;, but it doesn't appear to work if I define that value in the CSS.
Here's in image to explain my question:
EDIT: Here's a JSFiddle: http://jsfiddle.net/h66z3/2/
Since you are using the button_count layout, there is a little trick I found that seems to work. Basically you just wait for the iframe to be inserted, and then set its width to 0. It will then automatically resize itself to the proper size. I can't swear this works under all circumstances and with all widths, but please test it out and see if it works for you. Here is a sample code page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type='text/javascript'>
function loadcode(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";
fjs.parentNode.insertBefore(js, fjs);
}
function init()
{
loadcode(document, 'script', 'facebook-jssdk');
setTimeout(initx, 10);
}
function initx()
{
likeframe=document.getElementById('d2').getElementsByTagName('iframe')[0];
if (likeframe) setTimeout(setwidth, 10);
else setTimeout(initx, 10);
}
function setwidth()
{
likeframe=document.getElementById('d2').getElementsByTagName('iframe')[0];
likeframe.style.width='0';
}
</script>
</head>
<body onload='init()' style='margin:10px 50px'>
<div id="fb-root"></div>
<div style='text-align:right'>Here is some right-aligned text to compare to.</div>
<div id='d2' style='float:right'>
<div class="fb-like" href="http://www.google.com" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"></div>
</div>
</body>
</html>
Unfortunately this doesn't work for the standard layout, not sure why it's so different.
这篇关于右键调整Facebook的按钮iFrame的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
