垂直要素を水平要素として整列させ、CSSを使用して画面の右側に移動する方法は？

Question

私はプラグインを開発中で、CSSを使用してソーシャルボタンを右側に揃える必要があります。しかし、ラインで表示する代わりに（水平方向に）ボタンが垂直に表示されます。ここにそのコードがあります。

今

<div class= "sc1"><div class= "sc2"><span>Connect with us:</span> 
<div class= "sc3"><a href="http://www.facebook.com"><div class="facebook-icon"></div></a> 
<a href="http://www.twitter.com"><div class="twitter-icon"></div></a> 
<a href="http://www.google.com"><div class="google-icon"></div></a> 
<a href="http://www.instagram.com"><div class="instagram-icon"></div></a></div></div></div> 

CSS

.sc1 { 
    margin: 5px 0px; 
    background-color: #3498DB; 
    display: inline-block; 
    padding: 8px 10px; 
    width: 100%; 
} 
.sc2{ 
    float: right; 
    color: white; 
} 
.sc3 { 
    float: right; 

} 
.sc3 .facebook-icon { 
    background-image: url(images/social-connections-icons.png); 
    height: 32px !important; 
    width: 32px; 
    background-position: 0 0; 
    /*float: right;*/ 
} 
.sc3 .twitter-icon { 
    background-image: url(images/social-connections-icons.png); 
    height: 32px !important; 
    width: 32px; 
    background-position: -32px 0px; 
    /*float: right;*/ 
} 
.sc3 .google-icon { 
    background-image: url(images/social-connections-icons.png); 
    height: 32px !important; 
    width: 32px; 
    background-position: -125px 0px; 
    /*float: right;*/ 
} 
.sc3 .instagram-icon { 
    background-image: url(images/social-connections-icons.png); 
    height: 32px !important; 
    width: 32px; 
    background-position: -63px 0px; 
    /*float: right;*/ 
} 

誰かがしたい場合には、私は、GitHubの上の完全なコードをもアップロードした

Here's the picture

として、この後のコード最終結果が表示されています完全なコードを見てください。あなたの .sc3クラスに display: flex;を追加することができます Here it is.

Answer 1

：

.sc3 { 
    display: flex; 
} 

これは、すべてのアイコンが横方向にそろうようになります。