0

我已经在我的博客上安装了一个 ShareThis 插件已经有一段时间了，但我只是注意到并非我所有的“分享图标”都在内联显示。

我试过使用 padding-bottom 和 margin-bottom 但这并没有达到我的期望。

你们中的任何人都能够阐明我做错了什么吗？

提前问候，

杰克

网址： http: //mycountry.cc/

代码片段：

<div style= "display: inline; float: left; padding-left: 4px; padding-bottom: 4px;">
<span st_url='{Permalink}' st_title='{Title}' class='st_fblike' displayText='Facebook     Like'></span>
<span st_url='{Permalink}' st_title='{Title}' class='st_twitter' </span>
<span st_url='{Permalink}' st_title='{Title}' class='st_email'></span>
</div>

请注意，在预览窗口中，图标保持内联。很奇怪。

图片链接！

提前谢谢大家！

4

2 回答 2

0

在你的脚本中替换这个 CSS 类。

.stButton {
position: relative;
z-index: 1;
text-decoration: none;
color: black;
display: inline-block;
cursor: pointer;
margin-right: 3px;
margin-left: 3px;
font-size: 11px;
line-height: 26px;
}

如您所见，我已将 line-height 更改为 26px，现在它可以正确适应了。

于 2013-05-03T19:52:41.697 回答
0

我最终使用这种方法解决了我的问题：ShareThis 图标的垂直对齐

尽管在预览面板中显示奇怪，但它可以工作。

我的下一个问题是 disqus 评论的对齐方式。我试过 text-align: right 和 padding 无济于事。我似乎也丢失了事先跨越整个专栏的行...请参阅下面的图像和代码。

    <div style="padding-bottom:1px; display: inline-block;">
    <span style="vertical-align: top;"st_url='{Permalink}' st_title='{Title}' class='st_fblike' displayText='Facebook Like'></span>
    <span style="vertical-align: top;" st_url='{Permalink}' st_title='{Title}' class='st_twitter'> </span>
    <span style="vertical-align: top;"st_url='{Permalink}' st_title='{Title}' class='st_email'></span>    

     {block:IfDisqusShortname}<div style= "display: inline-block; vertical-align: top;"><a href="{Permalink}#disqus_thread" class="comments">{lang:View comments}</a></div>{/block:IfDisqusShortname}
     {/block:Date}

图片链接！

于 2013-05-04T08:08:37.480 回答