帶有「Facebook」，「Twitter」和「Linkedin」按鈕的水平社交圖標排列

我有一些問題需要水平對齊我的社交圖標按鈕，並且沒有找到任何令我滿意的答案來解決我的問題。帶有「Facebook」，「Twitter」和「Linkedin」按鈕的水平社交圖標排列

我有「Facebook」，「Twitter」和「Linkedin」按鈕，但是當我嘗試用css代碼更改它時，「Facebook」之一似乎沒有反應。

我只想讓「Facebook」按鈕與「Twitter」和「Linkedin」按鈕對齊。

下面是我的PHP文件中的PHP代碼：

<div id="fb-root"><hr/></div> 
<div class="fb-like" data-send="false" data-href="<?php the_permalink()?>" data-layout="button_count" data-width="100"data-show-faces="false"></div> 
<a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
<script src="//platform.linkedin.com/in.js" type="text/javascript"> 
lang: en_US 
</script> 
<script type="IN/Share"></script>

這裏是我把我的CSS文件中的CSS代碼：

.fb-like{float:left;display:block;} 
.twitter-share-button{float:left;}

這裏是我的問題的例子在帖子的末尾：

Post issue

我感謝你提前˚F或者你的幫助，

問候，

來源

2013-10-04 David

不涉及你的問題，當你去約或文章你有一個小問題。當您將鼠標懸停在相應頁面的下拉菜單上時，該文本將變爲白色，使其無法讀取，除非該鏈接具有活動的懸停狀態。 –

我發現最簡單的方法是將每個單獨的社交插件包裝在div中，然後浮動這些div而不是嘗試浮動插件。然後，你甚至可以應用寬度和填充以及所有東西來確定你想要的方式。

來源

2013-10-05 00:23:39

對於水平佈局，你可以嘗試使用內聯樣式。設置顯示的每個項目，以inline-block的是這樣的：

.fb-like{display:inline-block;} 
.twitter-share-button{display:inline-block;}

然後你就可以使用垂直對齊CSS屬性告訴他們，根據他們的頂部，底部或中段對齊。就像這樣：

.fb-like{display:inline-block;vertical-align:top;} 
.twitter-share-button{display:inline-block;vertical-align:top;}

此外，爲了使這些CSS屬性的工作，你將不得不設置的位置和刪除屬性：

float: left;

設置位置屬性與此：

position:static;

或本

position: relative;

來源

2013-10-04 13:14:35 Gergi

我遵循@KateNickerson的sugesttion，但我也必須添加一個固定寬度爲100px的Facebook分享按鈕才能正確顯示內聯。

<div style="width: 100px;float:left"> 
    <div class="fb-share-button" data-href="http://.../" data-layout="button_count"></div> 
</div> 

<div style="width: 100px;float:left; margin-top: 2px;"> 
    <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> 
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
</div>

來源

2015-06-26 10:31:54

帶有「Facebook」，「Twitter」和「Linkedin」按鈕的水平社交圖標排列

回答

相關問題