ソーシャル共有ボタンをCSSを使用してインラインブロックとして表示するにはどうすればいいですか？

Question

私は現在、私が好むインラインブロック形式で表示しているソーシャル共有ボタン（Facebook、Twitter、LinkedIn）があります。しかし、私がこれをどうやって行っているのか - 各ポストごとに個々のボタンごとにYUIを使用することで、実際に私のCSSが肥大化しました。私はこれを少しでも最適化するためにCSSクラスセレクタを使うだけで達成したいと思います。現在のところ、書式設定プロセスは非常に面倒です。

私はHTML/JSボタンを使用しています。このコードは、各プラットフォームの開発者Webサイトによって提供されています。しかし、新しいコードを有効にするためのセレクタの適切な組み合わせを見つけることができませんでした。そうすることを助けてくれれば幸いです。

私のサイトには、次のとおりです。www.tylercharboneauprofessional.com

ボタンコード：

<div class="fb-share-button" data-href="https://www.tylercharboneauprofessional.com/international-pulse/opinion-we-must-win-the-battle-against-climate-change" data-layout="button" data-mobile-iframe="false"> 
    <a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.tylercharboneauprofessional.com%2Finternational-pulse%2Fopinion-we-must-win-the-battle-against-climate-change&amp;src=sdkpreparse">Share</a> 
</div> 

<a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false">Tweet</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 

<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script> 

次のように現在のボタングループ（FB、ツイッター、LinkedInのは）それぞれ、スタイリングされています

padding-top: 0, padding-bottom: 0/
padding-top: 12px, padding-bottom: 5px/
padding-top: 0, padding-bottom: 5px 

ありがとう、

タイラー

Answer 1

これは非常に基本的な例です。ソーシャルアイテムをグループ化してから、グループ内のアイテムに必要なスタイルを適用します。このように他の共通のスタイルを適用することもできます。

/*Common Styling*/ 
 
.social-group>.social-item { 
 
    display: inline-block; 
 
} 
 

 
/*Facebook specific*/ 
 
.social-group>.social-item.facebook { 
 
    padding-top: 0, padding-bottom: 0 
 
} 
 

 
/*Twitter Specific*/ 
 
.social-group>.social-item.twitter { 
 
    padding-top: 12px, padding-bottom: 5px 
 
}

<div class="social-group"> 
 
    <div class="fb-share-button social-item facebook" data-href="https://www.tylercharboneauprofessional.com/international-pulse/opinion-we-must-win-the-battle-against-climate-change" data-layout="button" data-mobile-iframe="false"> 
 
    <a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.tylercharboneauprofessional.com%2Finternational-pulse%2Fopinion-we-must-win-the-battle-against-climate-change&amp;src=sdkpreparse">Share</a> 
 
    </div> 
 

 
    <a href="https://twitter.com/share" class="twitter-share-button social-item twitter" data-show-count="false">Tweet</a> 
 
</div> 
 

 

 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
 
<script src="//platform.linkedin.com/in.js" type="text/javascript"> 
 
    lang: en_US 
 
</script>

あなたは一般的なスタイリングを提供するために、選択リストを使用することができ、HTMLを修正へのアクセスが制限されている場合。これにはHTMLグループ化は必要ありません。

.fb-share-button, .twitter-share-button { 
    display:inline-block; 
} 

またはすべてのメディア・アイテムを使用すると、属性セレクタを使用することができsomething-share-buttonのような構造クラスを持っている場合：

[class*='-share-button'] { 
    display:inline-block; 
} 

これは-shareボタンを含むクラスと何を選択します。しかし、このアプローチはあまりにも脆弱です。