Css 右对齐类似Facebook的按钮iFrame的内容？_Css_Facebook_Facebook Like

Css 右对齐类似Facebook的按钮iFrame的内容？

css facebook

Css 右对齐类似Facebook的按钮iFrame的内容？,css,facebook,facebook-like,Css,Facebook,Facebook Like,我需要右对齐一个类似Facebook的按钮的内容，以便它们总是靠着设置“宽度”的一侧。我可以在Firebug中通过将表设置为浮动来实现这一点：对；，但是，如果我在CSS中定义该值，它似乎不起作用下面的图片解释了我的问题：编辑：这里有一个JSFiddle:我不相信你会有任何运气使用CSS（或其他相关内容）来影响Facebook的iFrame内容。我认为最好的方法是改变iFrame元素本身的宽度，使其正好适合您想要显示的Facebook内容的数量。然后右对齐整个iFrame 可以肯定的是，影响

我需要右对齐一个类似Facebook的按钮的内容，以便它们总是靠着设置“宽度”的一侧。我可以在Firebug中通过将表设置为浮动来实现这一点：对；，但是，如果我在CSS中定义该值，它似乎不起作用

下面的图片解释了我的问题：

编辑：这里有一个JSFiddle:

我不相信你会有任何运气使用CSS（或其他相关内容）来影响Facebook的iFrame内容。我认为最好的方法是改变iFrame元素本身的宽度，使其正好适合您想要显示的Facebook内容的数量。然后右对齐整个iFrame

可以肯定的是，影响iFrame中的内容是不可能的，因为它位于不同的域中

如果你想让它完全对齐到右边，没有任何额外的空白，你自己不添加，这是不会发生的。Facebook将在其内容末尾留出额外的空间，让类似的股票变得越来越大

要完全对齐它（没有额外的空白），您只需要使用like按钮，而不需要标记。like按钮本身是唯一具有恒定宽度的元素。

我也尝试过这样做，但因为它是iframe，所以无法更改它。我的建议是使用类似平面的按钮（我相信你正在使用的类似按钮会在169k的右侧显示信息，表示你喜欢它），或者改变你的设计，使其成为电子邮件、推特和Facebook

我知道这很糟糕，但因为它是一个iframe，iframe中的所有内容都不需要你插手。

检查这个示例，可能就是你想要的

.container {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
h1 {
    display: inline-block;   
}
ul li{float:right}
ul{overflow:hidden}

根据Derek的建议，我使用HTML5版本来产生以下结果：

下面的源代码是通过生成的

HTML


页面标题

CSS没有改变。

正如其他人指出的那样，没有简单的方法可以做到这一点，因为内容被锁定在iframe中。但是如果你喜欢挑战，你可能想看看我一直在修补的想法。

因为你使用的是按钮计数布局，我发现有一个小技巧似乎很管用。基本上，您只需等待iframe被插入，然后将其宽度设置为0。然后，它会自动将自身大小调整为适当的大小。我不能保证这在任何情况下和所有宽度下都有效，但请测试一下，看看它是否适合你。以下是示例代码页：

<!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>


函数加载代码（d、s、id）
{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））{return；}
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/all.js#xfbml=1”；
fjs.parentNode.insertBefore（js，fjs）；
}
函数init（）
{
加载代码（文档“脚本”、“facebook jssdk”）；
setTimeout（initx，10）；
}
函数initx（）
{
likeframe=document.getElementById（'d2'）.getElementsByTagName（'iframe'）[0]；
if（likeframe）setTimeout（setwidth，10）；
else设置超时（initx，10）；
}
函数setwidth（）
{
likeframe=document.getElementById（'d2'）.getElementsByTagName（'iframe'）[0]；
likeframe.style.width='0'；
}
下面是一些右对齐的文本进行比较。

不幸的是，这不适用于标准布局，不知道为什么它如此不同。

对于按钮计数布局非常容易。只需在iframe周围放置一个div，然后将div设置为绝对位置并向右。例如：

<div style="position:absolute;right:0;">
<iframe>...</iframe>
</div>

...

jsfiddle示例只是更改了iframe的

width

css属性。他需要根据内容动态改变宽度。它仍然显示生成iFrame的代码。是的，我知道，但是使用此方法时，

iFrame

的大小是正确的。不过，内容末尾仍然有一些空白。我肯定他不愿意。不幸的是，如果他想有那么多的喜欢出现，他就必须处理它，因为会有额外的空间来解释它。这肯定比以前的版本好。。。除了使用静态值调整iframe的大小之外，如果您使用这个特定的API，就没有办法解决这个问题。当有个位数时，它值得浪费3像素的空间吗？它也会让我发疯。我认为FB决定将他们的内容保持在一个静态宽度，以防止人们的内容在数字变化时跳转。这也会让我发疯的。看起来这是我必须去寻求的解决方案！没有理想（我很想让它显示[喜欢]@Walker：如果你不反对使用垂直空间，你可以使用

box\u count

布局。它有固定的宽度，但高度可变：它成功了，谢谢你，你是一个天才。我知道这是一个黑客，但作为一个设计师，我不能忍受任何其他东西。唯一不完美的是，如果他们不喜欢页面，它就不是一个完美的页面uto-resize。这不适用于其他语言。请尝试德语，您可能会看到它被裁剪成

js.src=“//connect.facebook.net/de_de/all.js#xfbml=1”

<!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>

<div style="position:absolute;right:0;">
<iframe>...</iframe>
</div>