0

ホームページのソーシャル ボタンですべてを左にフロートさせるのに問題があります。

フロートさせたら、ページ内の他のものが台無しになります。

これが私が使用するコードです

<div style="position:relative;float:left;margin-right: 10px;">

<script>(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&appId=339021756137381";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<a href="https://twitter.com/share" data-url="<?php the_permalink(); ?>" data-counturl="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" class="twitter-share-button" data-count="<?php the_permalink(); ?>" data-via="AppleSiam"></a>
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
</div>

上記のコードはページ内の他のコードを混乱させませんが、ボタンは改行されます

ここに画像の説明を入力

問題を見つけました。すぐに回答を受け入れます

<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

ご覧のとおり、上記のコードはdata-width="450"長すぎて同じ行に収まらず、他の行に移動してすべてを取得する必要があります。450px

4

2 に答える 2

2

つまり、両方のボタンを同じ行に配置しますか? その場合、ボタンまたはボタンが内側にあるコンテナに幅を定義するだけで、横に並べて収まるようになります。隣り合わせに座る余裕がある場合は、浮かせても新しい列にはなりません。

于 2012-04-24T13:13:46.790 に答える
1

私はあなたdivにidまたはを与えることをお勧めしますclass、そして次に：

#idOfDivElement,
.classOfDivElement {
    white-space: nowrap;
}

Awidthも理にかなっています。しかし、それは残りの内容に依存します。

于 2012-04-24T13:16:55.830 に答える