I've had a ShareThis plugin installed on my blog for quite some time now but have only just noticed that not all my 'share icon's' are displaying inline.
I've tried using padding-bottom and margin-bottom but that didn't accomplish what I was hoping.
Would any of you be able to shed some light on what I'm doing wrong?
Regards in advance,
Jack
website: http://mycountry.cc/
code snippet:
<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>
Note, in the preview window, the icons remain inline. Very odd.
Thanks in advance all!
Replace this CSS class in your script.
.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;
}
As you can see I have changed line-height to 26px and now it can fit correctly.
I ended up solving my problem using this method: Vertical alignment of ShareThis icons
It's worked although displays oddly in the preview panel.
My next problem is the alignment of the disqus comments. I've tried text-align: right and padding to no avail. I also seem to have lost the line that went across the whole column beforehand... See the image and code below.
<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}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.