0

次のようにマークアップします

     <div class="socialMediaPlugin">
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_google_plusone_share"></a>
    <a class="addthis_button_pinterest" ></a>
    <a class="addthis_button_email"></a>
  </div>

そして、私はしようとしていた

.socialMediaPlugin {
float: right;

しかし、それらは next ではなく、お互いの下に表示されますか? どうすればそれらを並べることができますか?

4

3 に答える 3

3

コンテナではなくリンクに適用する必要があるため、CSS は以下を読む必要があります

.socialMediaPlugin a {
    float: right;
}​

ここで例を見ることができます

または、使用することもできます

.socialMediaPlugin:nth-child(n) {
    float: right;
}​

また

.socialMediaPlugin * {
    float: right;
}​

私はそれをお勧めしませんが、それはかなりハックです!

さらに、そのようなものには順序付きリストを使用する必要があり、その例をここで見ることができます

ポスターからのリクエストに基づいて編集

リンクの順序を維持できるように、リンクを div でラップし、display:block代わりにその右にフロートする必要があります。このライブの例を参照してください。

CSS

.socialMediaPlugin div {
    display: block;
    float: right;
}
​
于 2012-04-10T20:38:32.173 に答える
0

あなたが使用することができます

.socialMediaPlugin a{
    display: block;
    position: relative;
    float: left;
}

リンクは左右になります

于 2012-04-10T20:38:01.890 に答える
0

アンカーはすでにインライン レベルの要素であるため、自然に隣同士に積み重なっていきます。

問題は、コンテナが積み重ねられたアイテムを収容するのに十分な幅がなく、それらをラップしていることである可能性が高くなります.

それか、アンカー要素に他のスタイルを適用して、ブロックレベル要素のように振る舞わせています。

于 2012-04-10T20:46:01.203 に答える