Html 如何使用CSS将社交共享按钮显示为内联块？

我有一些社交分享按钮（Facebook、Twitter、LinkedIn），我现在用内联块格式显示，我更喜欢这种格式。然而，我这样做的方式——在每篇文章的每个按钮上使用YUI——确实让我的CSS膨胀了。我想通过简单地使用CSS类选择器来实现这一点，以稍微优化一些东西。目前，样式化过程非常繁琐

我使用的是HTML/JS按钮，这是每个平台的开发者网站提供的代码。然而，我还没有找到正确的选择器组合，以使任何新代码有效。这样做的任何帮助都将是巨大的

按钮代码：

<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>

---

这是一个非常基本的例子。将您的社交项目分组，然后将所需样式应用于组中的项目。您可以通过这种方式应用任何其他常用样式

/*常用样式*/
.social group>.social项{
显示：内联块；
}
/*特定于Facebook的*/
.social group>.social-item.facebook{
顶部填充：0，底部填充：0
}
/*特定于Twitter的*/
.social group>.social-item.twitter{
顶部衬垫：12px，底部衬垫：5px
}

朗：恩

请提供您迄今为止的代码，最好是感谢您的回答。值得注意的是，就我而言，我在Squarespace网站的范围内工作。“我的按钮”的代码位于各个代码块中；因为我有三个不同的共享按钮，所以每个博客文章后面都有三个代码块。不幸的是，我没有足够的时间处理我从头组装的自由格式HTML文档。为了澄清这一点，对元素进行分组不是不可行吗？你能在元素上添加和更改类吗？我在这方面真的没有太多经验，至少在我一直从事的这个项目上是这样。通常，传统的CSS规则适用于您希望在我的网站中应用它们的任何地方；但是，必须记住，我无法访问Squarespace的核心HTML结构来修改模板（除非解锁“开发人员模式”，但这超出了我的专业范围）。除了向导航元素添加伪类等，我通常使用Safari开发工具“搜索”元素类，然后从中更改属性。如果您无法以任何方式修改HTML，这将使优化非常困难。正确。对我来说，当我胡闹的时候，我会猜测按钮的类是“fb共享按钮”、“twitter共享按钮”和“IN widget”——基于提供的HTML，并做一些挖掘。基于代码，也许使用开发人员工具，你会得出类似的结论@jonp？

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