Drupalで互いに隣り合っているのではなく、互いの上にあるソーシャルボタン

Question

私はCSSの問題に苦しんでいます。私はShareThisボタンの横にGoogle +1ボタンを表示したい（私はDrupalを使用している）。何らかの理由で

、DrupalはパネルsearatorのCSSクラスを追加します。

私は、次のように私のCSSファイルを変更しようとした：

.panel-separator { display: none; } 

が、それはこれだけ生産：

を

ShareThisボタンの右側にGoogle +1ボタンを表示するのに十分なスペースがあります。しかし、ボタンは互いの上に積み重ねられています。

ボタンを水平に整列させるにはどうすればよいですか？ありがとう。

更新

私は幅の多くを設定していると私もfloat: left;を追加しました：ここ

.GYPO_social_buttons { 
    padding-top: 91px; 
    width: 200px; 
    float: left; 
} 

.GYPO_share_this { 
    width: 90px; 
} 

.GYPO_google_plus_one { 
    width: 40px; 
} 

は（私はFirefoxを使用しています）放火魔に応じ囲むdivです：

更新II

私の悪いです。私は今ではfloat: left;を、ボタンdivを囲むのではなく、自分自身で設定しました。問題は解決されました。ありがとう!!!

.GYPO_share_this { 
    width: 90px; 
    float: left; 
} 

.GYPO_google_plus_one { 
    width: 40px; 
    float: left; 
} 

Answer 1

これらのアイコンを保持しているコンテナdivに十分な幅を与える必要があります。その後、float: left;を入力することで、これらのアイコンを浮動させることができます。 Google +1が下に移動しているのは、コンテナdivのメールアイコンの横にこれに対応できる幅がないためです。

Answer 2

あなたが提供しているhtmlとcssの部分からは、これを行うための最善の方法を見つけるのはちょっと難しいです。問題は何がブレークを生成するのかです。親要素が十分に幅がなく、+1が下になければならない可能性があります。その場合、単に幅を変更することができます。また、ブレークを生成するcssが存在する可能性もあります（たとえば、display：ブロックと要素の浮動小数点数がない場合）。その場合は、インラインまたはボタンのfloat：leftを表示するように変更しようとする可能性があります。 （それが画像上の明確なように見えるdoesntのが）、私はそれ以上の可能性があると仮定し

フロートが破損する原因と思われるどこかで明確があるかもしれません...

Answer 3

私は確認する必要がありますあなたのコードの詳細。すべてのアイコンを保持するためにコンテナを大きくしようとしたところ、それがうまくいかなかった場合、アイコンを次の行に強制するもう1つの要素だったと思います。もっとコードがなければ、私ができることは推測することです...

Answer 4

私は同じ状況にいました。ここで私の問題を解決したもの：

また、地域の「スタイル」設定を選択し、「マークアップなし」を選択することもできます。これにより、パネルセパレータが削除されます。詳細情報については

：https://www.drupal.org/node/579020#comment-8163459