javascript - 内联 CSS 以对齐社交分享图标

Question

我在我的网站上使用来自 ShareThis 的社交分享按钮。我在使用 Facebook Like 按钮时遇到一些对齐问题。 见截图。

我想要一些关于倾斜 CSS 语法的指导，以帮助对齐或填充 Facebook 行按钮，使其与其他按钮垂直对齐。 我尝试了许多不同的组合，包括添加 style="padding-bottom:25px"

这是ShareThis提供的HTML代码:

<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_googleplus_large' displayText='Google +'></span>
<span class='st_email_large' displayText='Email'></span>
<span class='st_sharethis_large' displayText='ShareThis'></span>
<span class='st_fblike_large' displayText='Facebook Like'></span>
<span class='st_plusone_large' displayText='Google +1'></span>

将这些行添加到文件底部

<script type="text/javascript">var switchTo5x=false;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-22cc647b-2be-2114-fe32-8c2f8b9ab95e", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

Answer 1

由于所有 span 的最大高度最多为 32px，因此您应该将其添加到样式表中

span {display:inline-block; height:32px; line-height:32px;}

Example

请注意，最好给所有的 span 一个类，然后为其设置样式，而不是像上面那样设置 span 标签的样式