CSS對齊問題

我想不通爲什麼Facebook的按鈕在以下頁面頂部 http://wishd.me/chovy/lists/507f8817a51102a137000001 CSS對齊問題

<div class="social"> 
    <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-size="medium" data-count="none">Tweet</a> 
    <div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div> 
</div>

Facebook的按鈕比低一點點未對齊微博按鈕。

來源

2012-10-19 chovy

嘗試

<div style="float:left ;margin-right:5px;margin-top:4px"> 
    <iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/tweet_button.1347008535.html#_=1350635993430&amp;count=none&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fwishd.me%2Fchovy%2Flists%2F507f8817a51102a137000001&amp;size=m&amp;text=chovy's%20wishlist%20%C2%BB%20Movies%20-%20Wishd.me&amp;url=http%3A%2F%2Fwishd.me%2Fchovy%2Flists%2F507f8817a51102a137000001" class="twitter-share-button twitter-count-none" style="width: 58px; height: 20px;" title="Twitter Tweet Button" data-twttr-rendered="true"></iframe> 

</div>

結果

來源

2012-10-19 08:42:07

修復它，但有點哈克。我不應該修改他們的代碼來讓它們正確顯示。我認爲有一個規則是陷入Facebook標記，這是搞砸了。 – chovy

@chovy是我的答案解決了您的問題或對您有幫助？ –

.social iframe { 
    position: relative; 
    top: 4px; 
}

Twitter的iframe移動低一點，所有的排列好。

p.s.您的.social樣式位於style.css行445.

來源

2012-10-19 08:46:22

如果您要檢查dom，您會看到twitter iframe的高度爲20px，fb div的高度爲27px。

有幾種方法來處理這個問題。我不喜歡上面的兩個帖子，因爲.social .iframe規則也會將fb iframe 4px向下移動。另一個是爲了我的意見而混亂。

你可以這樣做：

.social > iframe { display: inline-block; position: relative; top: 4px; }

所有的解決方案並不是最漂亮的...

來源

2012-10-19 08:54:58 gocsp

回答

相關問題