HTML – 如何显示Facebook Like按钮和Twitter Tweet按钮彼此相邻?

前端之家收集整理的这篇文章主要介绍了HTML – 如何显示Facebook Like按钮和Twitter Tweet按钮彼此相邻?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我无法让FB Like按钮和Tweet按钮显示在一起!

HTML

<div class="grid_3 social">
  <ul>
     <li>
          <fb:like href="http://{{ request.get_host }}{{ post.get_absolute_url }}" layout="button_count" show_faces="false" width="450" font=""></fb:like>
     </li>
     <li>
          <a href="http://twitter.com/share?url={{ "http://localhost:8000"|urlencode }}{{ post.get_absolute_url }}&text=mytext" class="twitter-share-button">Tweet</a>
      </li>
   </ul>
</div>

CSS:

.social {
float: right;
}
.social ul {
    list-style: none outside none;
    display: inline;
}

.social li {
    display: inline;
}

我尝试了我能想到的每一个组合都无济于事.请帮忙!! CSS将是我的死…

虽然我们讨论这些按钮的主题,但我们都知道它们会使页面的加载时间增加一倍和三倍,因为它们会进行大量的JS调用,尤其是当您使用博客索引页面时.任何人对如何纠正这种情况都有任何想法?我已经在使用Disqus,现在添加FB和Twitter我的索引页面最多可能需要5秒才能加载.太慢了.在按钮显示没有计数帮助?

谢谢!

编辑:从Firebug获取的实际HTML:

<div class="grid_3 social">
<ul>
<li>
<fb:like class=" fb_edge_widget_with_comment fb_iframe_widget" font="" width="450" show_faces="false" layout="button_count" href="http://localhost:8000/24/">
<span>
<iframe id="f3625cd56daea42" class="fb_ltr" scrolling="no" name="fdb43a564bf6bc" style="border: medium none; overflow: hidden; height: 25px; width: 450px;" title="Like this content on Facebook." src="http://www.facebook.com/plugins/like.PHP?api_key=109222892497007&channel_url=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.PHP%3Fversion%3D0%23cb%3Df30031a637a623%26origin%3Dhttp%253A%252F%252Flocalhost%253A8000%252Ff1d530a50043dd4%26relation%3Dparent.parent%26transport%3Dpostmessage&href=http%3A%2F%2Flocalhost%3A8000%2F24%2F&layout=button_count&locale=en_US&node_type=link&sdk=joey&show_faces=false&width=450">
<html id="facebook" class=" " lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body class="plugin transparent_widget ff3 mac Locale_en_US">
<input id="post_form_id" type="hidden" autocomplete="off" value="fa23e0256eb11be4c423202178ac80f5" name="post_form_id">
<div id="FB_HiddenContainer" style="position:absolute; top:-10000px; width:0px; height:0px;"></div>
<div id="LikePluginPagelet">
<div id="connect_widget_4daeb2d755f689e27484431" class="connect_widget button_count" style="">
<table class="connect_widget_interactive_area">
<tbody>
<tr>
<td class="connect_widget_vertical_center connect_widget_button_cell">
<div class="connect_button_slider">
<div class="connect_button_container">
<a class="connect_widget_like_button clearfix like_button_no_like">
<div class="tombstone_cross"></div>
<span class="liketext">Like</span>
</a>
</div>
</div>
</td>
<td class="connect_widget_vertical_center connect_widget_confirm_cell">
<td class="connect_widget_button_count_including hidden_elem">
<td class="connect_widget_button_count_excluding">
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
<script type="text/javascript">
<script type="text/javascript">
</body>
</html>
</iframe>
</span>
</fb:like>
</li>
<li>
<iframe class="twitter-share-button twitter-count-horizontal" scrolling="no" frameborder="0" tabindex="0" allowtransparency="true" src="http://platform0.twitter.com/widgets/tweet_button.html?_=1303294651733&count=horizontal&lang=en&text=mytext&url=http%3A%2F%2Flocalhost%3A8000%2F24%2F" style="width: 110px; height: 20px;" title="Twitter For Websites: Tweet Button">
<html lang="en">
<head>
<body class="hcount show-count">
</html>
</iframe>
</li>
</ul>
</div>

解决方法

怎么样:
.social li {
    float: left;
}

这将有助于查看您的实际HTML. < FB:像>它不是HTML标签,它是Facebook组成的小标记语言(FBML),当Facebook的JavaScript运行时它被实际的HTML取代.

(我相信他们也希望弃用FBML – 你可能想看一下< iframe> – like like button.)

原文链接:https://www.f2er.com/html/226939.html

猜你在找的HTML相关文章