0

ここにあるBootstrapを使用してWebサイトを作成しています：

http://www.bestcastleintown.co.uk/wp/

私の問題は、ホームページのすぐ下にある Twitter と Facebook のソーシャル ネットワーキング ボタンが、<header>よく見ると水平方向に整列していないことです。class="like-btn"Facebookボタンを含むリスト項目用に別のCSSクラスを作成することで、それらを水平に整列できることを望んでいました。

<div class="bs-docs-social">
  <div class="container">
    <ul class="bs-docs-social-buttons">
      <li class="like-btn">
          <!--facebook like button-->
      </li>
      <li class="follow-btn">
          <!--twitter follow button-->
      </li>
      <li class="tweet-btn">
          <!--twitter tweet button-->
      </li>
    </ul>
  </div>
</div>

ただし、いいねボタンの Facebook コードは、いくつかの CSS スタイルを含む iframe 内に含まれているように見えます。私の Web サイトが Facebook iframe と同じ一致するプロトコル、ドメイン、およびポートを持っていない限り、Same Origin のために変更できません。ポリシー。

Facebook の CSS ルールの 1 つに気付きました。これを削除すると、ボタンが整列しているように見えますが、いいねボタンの下部から境界線が削除され、望ましくありません。

.pluginButtonSmall {
    padding: 0 5px 2px;
}

.like-btnボタンが水平に整列するように問題を解決するためにクラスに追加できるものはありますか?

4

4 に答える 4

0

>divの代わりに s を使用し、ソーシャル コンテナー要素でorを使用して、それらを水平方向に整列させます。すべてのソーシャル ボタンが同じサイズであるとは限らないため、通常は 1 ～ 2 ピクセル移動する必要があります。ullimargin-toppadding-top

于 2013-04-08T13:30:24.700 に答える
0

それが問題の原因である場合; ルールを追加するかもしれません

.like-btn div {
    padding: 0px;
}

また

.like-btn .pluginButtonSmall {
    padding: 0px;
}
于 2013-04-08T13:31:55.653 に答える
0

次のようなCSSルールを試してみてください...

.like-btn, .follow-btn, .tweet-btn {
   float: left;
   display: inline-block;
 }
于 2013-04-08T13:33:48.653 に答える