ソーシャルアイコンを水平方向に整列するにはどうすればいいですか

Question

[このコースを共有]アイコンの下にあるアイコンを水平に整列しようとしていますが、サイドバーでは動作しますが、何かアドバイス？ここ

サイドバー内のアイコンhttp://www.themarketinggroup.ca/canscribe/courses/medical-transcription-healthcare-documentation-course/

Answer 1

例は左に浮いています。

一つの解決策は、フロートのルールを追加することである：これと同様に、.widgetリチウムのセレクタに左：

.widget li { float: left; } 

あなたはその後パディングまたはマージン規則に各アイコン間の間隔の所望の量を追加することができ。

また、flexboxを使用することもできます。その場合、あなたはソーシャルのクラスを持つulを表示します：flexにして、アイコンに水平方向の間隔を与えるためにjustify-contentの追加ルールを追加します。このようなもの：

ul.socials { display: flex; justify-content: space-around; } 

私は後者の解決策が好きです。なぜなら、後者の解決策は、あなたのためにアイコンを配置するためです。

Answer 2

これを達成するための可能な方法は、我々はあなたの問題を理解するためにコードの一部を必要とし、おそらくあなたはそれを解決するために助けることができるよりも、フロート

.display_inline li { 
       float: left; // inline elements in left    
       margin: 10px; //to create some space between the icons 

        }