Html 如何显示 Facebook Like 按钮和 Twitter Tweet 按钮彼此相邻？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5728293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display Facebook Like button and Twitter Tweet button next to each other?
提问by rabbid
I cannot get the FB Like button and the Tweet button to display next to each other!!
我无法让 FB Like 按钮和 Tweet 按钮并排显示！！
HTML:
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:
CSS：
.social {
float: right;
}
.social ul {
list-style: none outside none;
display: inline;
}
.social li {
display: inline;
}
I tried every combination I can think of to no avail. Help please!! CSS will be the death of me...
我尝试了所有我能想到的组合都无济于事。请帮忙！！CSS将是我的死...
While we're on the subject of these buttons, we all know they double and triple your page's load time because they make a lot of JS calls, especially when you're on something like a blog index page. Anyone have any ideas on how to remedy this situation? I'm already using Disqus, and now adding FB and Twitter my index page can take up to 5 seconds to load. So slow. Would showing no counts on the buttons help?
当我们讨论这些按钮时，我们都知道它们会使您的页面加载时间增加一倍或三倍，因为它们会进行大量 JS 调用，尤其是当您在博客索引页面上时。任何人都对如何解决这种情况有任何想法？我已经在使用 Disqus，现在添加 FB 和 Twitter，我的索引页面可能需要 5 秒才能加载。太慢了。在按钮上不显示计数会有帮助吗？
Thanks!
谢谢！
EDIT:Actual HTML taken from Firebug:
编辑：从 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>
采纳答案by Paul D. Waite
How about:
怎么样：
.social li {
float: left;
}
It would help to see your actual HTML. <fb:like>is not an HTML tag, it's Facebook's little markup language they made up (FBML), and it gets replaced with actual HTML when Facebook's JavaScript runs.
查看您的实际 HTML 会有所帮助。<fb:like>不是 HTML 标签，而是 Facebook 的小型标记语言 (FBML)，当 Facebook 的 JavaScript 运行时，它会被实际的 HTML 替换。
(I believe they're looking to deprecate FBML too — you might want to have a look at the <iframe>-based like button.)
（我相信他们也希望弃用 FBML——你可能想看看 -based <iframe>like 按钮。）
回答by Diarmaid
To answer your second question, you would want to load the javascript asynchronously - someone has modified the twitter script to do so, and I would imagine the facebook script has been modified to do the same.
要回答你的第二个问题，你会想要异步加载 javascript - 有人修改了 twitter 脚本来这样做，我想 facebook 脚本已被修改为做同样的事情。
I can't find links too readily on google, but for 5 seconds a page I'm sure you have the motivation!
我在 google 上找不到太容易的链接，但是 5 秒一个页面我相信你有动力！
回答by Shawn Wernig
The simplest solution I have found is to wrap your buttons in a LI inside a UL.
我发现的最简单的解决方案是将您的按钮包装在 UL 内的 LI 中。
Take your facebook button code:
获取您的 facebook 按钮代码：
<div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana"></div>
Change the DIV tag to LI, and set it inside the UL with the rest of your buttons:
将 DIV 标签更改为 LI，并将其设置在 UL 中，并使用其余按钮：
<li class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana"></li>
And set your CSS widths for the class fb-like down to something closer to its actual size.
并将类 fb-like 的 CSS 宽度设置为更接近其实际大小的值。
回答by Nasser Hadjloo
You can assign following CSS Classto your List Items
您可以将以下内容分配CSS Class给您的列表项
.NextTo
{
float : left;
}
or
或者
.NextTo
{
display: inline-block;
width: auto;
}
回答by Brandable Domains
I also spent a lot of time to bring them together and show next to each other and finally found the easiest solution..
我也花了很多时间把它们放在一起，并排展示，最后找到了最简单的解决方案。
You simply need to past html codes between:
您只需要在以下之间传递 html 代码：
<div align="center">... past your code here...`</div>`
