3

dirtycookie.coの上部に表示されるソーシャルメディアボタンを揃えようとしています

それらは適切に配置されていますが、それらの間にはたくさんの間隔があります。

私のHTML：

<div class="grid_12 socialheader">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style" style="text-align:center;">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" addthis:url="http://www.facebook.com/TheDirtyCookie"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit" pi:pinit:url="http://www.dirtycookie.co" pi:pinit:media="http://distilleryimage6.s3.amazonaws.com/1bf5b1a46d0b11e2914122000a9f1439_6.jpg" pi:pinit:layout="horizontal" always-show-count="1"></a> 
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a> 
<a class="addthis_counter addthis_pill_style"></a>
</div>
<!-- AddThis Button END -->
</div>

私のCSS：

.socialheader {
    width: 100%;
    margin: 3px 1px 0px 1px;
    text-decoration: none;
}

.socialheader a{
    padding: 0px 10px 0px 20px !important;
    margin: 0px !important;
    width: 50px !important;
    display:inline !important;
    text-align: center;
    float: center !important;
    position:relative !important;
    top:0px !important;
}

私は自分が間違っていることを理解できません:/

理想的には、これらのウィジェットはページの中央にぴったりと収まるように配置します。また、Pinterest ボタンの右側にカウンターが必要ですが、そうでないことにも注意してください。なぜそれが起こっているのか誰かが知っているなら、私に知らせてください。

助言がありますか？

ありがとう、クリス

4

2 に答える 2

4

ウィジェットボタンのカウンターを使用しています。成長のために余分なスペースが必要であり、iframeとして提供されるため、スタイルを変更することはできません。

右側の余分なスペースが設計上の問題にならないように、カウンターのないプレーンなボタンを表示するか、ウィジェットを垂直に積み重ねることをお勧めします。

更新：ウィジェットのスタイルがウィジェットを左にフロートさせるため、ウィジェットは中央に配置されません。これを実行して、以下をオーバーライドできます。

.socialheader a {
    float: none !important;
}
于 2013-02-03T02:33:51.270 に答える