右对齐一个Facebook like-button 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'>
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'>下面是一些要比较的右对齐文本。< / div>
< div id ='d2'style ='float：right'>
< div class =fb-likehref =http://www.google.comdata-send =falsedata-layout =button_countdata-width =90 show-faces =false>< / 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 like-button iFrame的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
