【问题标题】:<span> not remaining inline (ShareThis)<span> 未保持内联 (ShareThis)
【发布时间】:2023-03-12 11:09:02
【问题描述】:

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

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

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

提前问候,

杰克

网站:http://mycountry.cc/

代码sn-p:

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

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

Link to image!

提前谢谢大家!

【问题讨论】:

  • 分享这将在这些跨度标签中添加自己的东西,如果可以的话,你需要尝试覆盖这些样式。
  • 关闭你的 span 标签:

标签: html css tumblr sharethis


【解决方案1】:

在你的脚本中替换这个 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,现在它可以正确适应了。

【讨论】:

    【解决方案2】:

    我最终使用这种方法解决了我的问题:Vertical alignment of ShareThis icons

    虽然在预览面板中显示奇怪,但它确实有效。

    我的下一个问题是disqus cmets 的对齐。我试过 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}
    

    Link to image!

    【讨论】:

    • 如果您想问另一个问题,请创建一个新问题,不要在答案中提出。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-22
    • 1970-01-01
    • 2011-07-29
    • 1970-01-01
    • 2016-09-28
    相关资源
    最近更新 更多