Question

我在此网站工作My Site在主页模板中，我实际上将以下代码添加到要显示的社交链接

<div class="ss"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none"></a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<iframe src="http://www.facebook.com/plugins/like.php?app_id=175266875876185&amp;href=<?php the_permalink(); ?>&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=lucida+grande&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

<g:plusone size="medium" href="<?php the_permalink(); ?>"></g:plusone></div>

并添加了css如下

.ss iframe {
   width: 85px !important;
display:inline;
}

但是社交图标不是内联的。我认为twitter按钮有问题。减小宽度但没有帮助。请帮助!!谢谢！

Answer 1

实际上问题是div宽度的内容太小了。试试这个。

更改这些样式，

.ss {
    margin-top: 5px;
    display: inline-block;
}

.ss iframe { 
    /*  as it is...  */ 
}

.twitter-share-button {
  width:59px !important;
}

.gplus {
  width:59px !important;
  display:inherit !important;
}

在

的html中添加内联样式

twitter

<a href="twitter" style="width: 59px !important;" > </a>

<强>实（可能<a> link或<div>或<iframe>）

<a href="facebook" style="width: 85px !important; margin-left:8px !important;" > </a>

gplus （可能<a> link或<div>或<iframe>）

<div class="gplus">
    <a href="gplus"> </a>
</div>

在一条线上显示社交图标

1 个答案: