css < span>使用ShareThis时不保持内联

0kjbasz6 于 2022-12-15 发布在其他

关注(0)|答案(2)|浏览(125)

我已经有一个ShareThis插件安装在我的博客上相当长的一段时间了，但只是刚刚注意到，并不是所有的'共享图标'显示内联。
我试过使用底部填充和底部边距，但这并没有达到我的期望。
你们谁能告诉我我做错了什么吗？
代码片段：

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

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

css

来源：https://stackoverflow.com/questions/16366472/span-not-remaining-inline-when-using-sharethis

2条答案

按热度按时间

ljo96ir51#

在脚本中替换此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;
}

正如你所看到的，我已经改变了线高为26px，现在它可以正确地适合。

赞(0）回复(0）举报 2022-12-15

7cwmlq892#

我最终用这个方法解决了我的问题：Vertical alignment of ShareThis icons
它的工作，虽然显示在预览面板奇怪。
我的下一个问题是disqus注解的对齐。我试过text-align：右和填充没有用。我似乎也失去了行，穿过整个列之前...见下面的图像和代码。

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

***Link to image!***

赞(0）回复(0）举报 2022-12-15

我来回答

css < span>使用ShareThis时不保持内联

2条答案

相关问题

热门标签

最新问答