1

ソーシャル アイコン ボタンを水平方向に配置するのに問題があり、問題に対する満足のいく回答が見つかりません。

「Facebook」、「Twitter」、「Linkedin」のボタンがありますが、「Facebook」のボタンをcssコードで変更しようとすると反応しないようです。

「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;}

投稿の最後にある私の問題の例を次に示します。

問題を投稿する

よろしくお願いします。

よろしく、

4

3 に答える 3

1

水平レイアウトの場合は、インライン スタイルを使用できます。次のように、すべてのアイテムの表示をインライン ブロックに設定します。

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

次に、vertical-align 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-04T13:14:35.147 に答える
1

私は@KateNickersonからの提案に従いましたが、Facebookの共有ボタンがインラインで正しく表示されるように、100pxの固定幅も追加する必要があります。

<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-26T10:31:54.640 に答える