Question

我需要右键对齐Facebook Like按钮的内容，以便它们始终坐在他们设置的“宽度”的骑行侧。我可以通过将表设置为float：right;来在Firebug中执行此操作，但如果我在CSS中定义该值，它似乎不起作用。

这是在图像中解释我的问题： enter image description here

编辑：这是一个JSFiddle：http://jsfiddle.net/h66z3/2/

Answer 1

由于你使用的是button_count布局，我发现有一个小技巧似乎有效。基本上你只是等待插入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>

不幸的是，这对标准布局不起作用，不确定它为何如此不同。

Answer 2

根据Derek的建议，我使用HTML5版本来产生这样的结果：http://jsfiddle.net/namuol/h66z3/6/

以下来源是通过Facebook's Like Button generator生成的。

JS

(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/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

HTML

<div id="fb-root"></div>
<div class="container">
    <h1>Page Title</h1>
    <ul class="share">
        <li>
            <div class="fb-like" data-href="www.teespring.com" data-send="false" data-layout="button_count" data-show-faces="false"></div>
        </li>
        <li>
            <a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
        </li>
    </ul>
</div>

CSS没有改变。

Answer 3

我不相信你会使用CSS（或其他任何东西）来影响Facebook iFrame的内容。我认为你要做的最好的事情就是改变iFrame元素本身的宽度，这样它就足以满足你想要显示的Facebook内容的数量。然后右对齐整个iFrame。

非常确定影响iFrame中的内容是不可能的，因为它位于不同的域中。

如果你希望它与右边完全对齐，没有任何你自己不添加的额外空白区域，那就不会发生。 Facebook将在内容的末尾留出额外的空间来代替Like＃ticker来扩大规模。

为了完美地对齐它（没有多余的空白区域），你只需要使用没有自动收报机的类似按钮。 like按钮本身是唯一具有恒定宽度的元素。

Answer 4

我也试过这样做，但因为它是一个iframe你无法改变它。我的建议是使用任何一个平面按钮（我相信你正在使用的类似按钮会在169k的右边显示你喜欢它的信息）或改变你的设计所以它是电子邮件| Twitter |主页。

我知道这很糟糕，但是因为它是一个iframe，iframe里面的所有东西都会为你移动。

Answer 5

检查此示例http://jsfiddle.net/sandeep/h66z3/3/可能是您想要的

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

Answer 6

正如其他人所指出的，没有简单的方法可以做到这一点，因为内容被锁定在iframe中。但是，如果你喜欢挑战，你可能想看看How can I make the Facebook Like button's width automatically resize?我一直在修补的想法。

Answer 7

button_count布局非常简单。只需在iframe周围放置一个div，然后将div设置为绝对定位并向右移动。如，

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

右键对齐Facebook like-button iFrame的内容？

7 个答案: