右對齊Facebook Like按鈕iFrame的內容？

我需要對齊Facebook Like按鈕的內容，以便它們始終坐在其設置的「寬度」的乘坐側。我可以在Firebug中將表設置爲float：right;但是如果我在CSS中定義該值，它看起來不起作用。右對齊Facebook Like按鈕iFrame的內容？

這裏的圖像來解釋我的問題： enter image description here

編輯：這裏有一個的jsfiddle：http://jsfiddle.net/h66z3/2/

來源

2011-10-12 Walker

由於您使用的是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>

不幸的是，這不適用於標準佈局，不知道爲什麼它如此不同。

來源

2011-10-19 03:05:25

它的工作，謝謝你，你是一個天才。我知道這是一個黑客，但作爲一名設計師，我無法忍受任何其他事情。唯一不完美的是，如果它們不像頁面，它不會自動調整大小。 – Walker

我不相信你會使用CSS（或任何其他爲有任何運氣問題）影響Facebook的iFrame內容。我認爲你所要做的最好的事情就是改變iFrame元素本身的寬度，以便它適合你想顯示的Facebook內容的數量。然後右對齊整個iFrame。

很確定，影響iFrame內的內容是不可能的，因爲它位於不同的域。

如果您希望它完全對齊到正確的位置，而沒有任何您自己不添加的額外空白區域，則不會發生。 Facebook將在其內容的末尾留出額外的空間，以解決Like＃ticker越來越大的問題。

要完美地對齊它（沒有額外的空白區域），只需要使用NO按鈕之類的按鈕。像按鈕本身是唯一具有恆定寬度的元素。

來源

2011-10-12 16:16:55 jkupczak

看起來像這是我必須去的解決方案！沒有理想（我會喜歡它只是顯示[像] <10K]，但它應該沒問題！ – Walker

@Walker：如果你不反對使用垂直空間，你可以使用'box_count'佈局來代替。它有一個固定的寬度，但可變的高度：http://jsfiddle.net/namuol/h66z3/14/ – namuol

我試過這樣做，但因爲它是一個iframe，你不能改變它。我的建議是使用任何一個飛機像按鈕（我相信你正在使用的按鈕將顯示信息右側的169k說你喜歡它）或改變你的設計，所以它是電子郵件| Twitter | Facebook的。

我知道它很糟糕，但因爲它是一個iframe，所以iframe中的所有內容都爲您提供。

來源

2011-10-12 16:27:31

檢查這個例子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}

來源

2011-10-12 16:34:12 sandeep

你的jsfiddle例子改變了iframe的'width' css-property屬性，他需要寬度根據它的內容 – namuol

繼德里克的建議下，我使用了HTML5版本，而不是產生這樣的結果：http://jsfiddle.net/namuol/h66z3/6/

源低於經Facebook's Like Button generator產生。

(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不變。

來源

2011-10-12 17:24:21 namuol

用Firebug查看你的jsfiddle的源代碼，它顯示了代碼生成一個iFrame仍然 – jkupczak

是的我知道，但是當使用這種方法時，iframe是正確的尺寸 – namuol

還有一些空白但是，我確信他寧願沒有，但不幸的是，如果他想要顯示出喜歡的數量，他將不得不處理它，因爲額外的空間將會存在說明它 – jkupczak

正如其他人指出的那樣，這樣做並不容易，因爲內容被鎖定在iframe中。但是，如果你喜歡挑戰，你可能想看看How can I make the Facebook Like button's width automatically resize?，這是我一直在琢磨的一個想法。

來源

2011-10-12 18:40:22

-1

button_count佈局非常簡單。只需在iframe中放置一個div，並將div設置爲絕對定位和右側。例如，

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

來源

2012-08-10 09:57:54 Bryan

右對齊Facebook Like按鈕iFrame的內容？

回答

相關問題