Html 如何让 Twitter 和 Facebook 按钮水平对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16385394/
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 can I get the Twitter and Facebook buttons to horizontally align?
提问by B. Clay Shannon
Using the html they allow you to generate, I've added Twitter and Facebook "Like" buttons to my site. They align vertically just fine, but that takes up too much space - I'd rather align them horizontally. So I removed the "div" from the facebook button. This indeed places the facebook button to the right of the Twitter button, but a little bit askew/akimbo.
使用它们允许您生成的 html，我在我的网站上添加了 Twitter 和 Facebook 的“赞”按钮。它们垂直对齐就好了，但这占用了太多空间 - 我宁愿将它们水平对齐。所以我从facebook按钮中删除了“div”。这确实将 facebook 按钮放在 Twitter 按钮的右侧，但有点歪斜/叉腰。
Here's the html in its current vertical orientation (twitter on top, facebook below):
这是当前垂直方向的 html（顶部是 twitter，下面是 facebook）：
<header>
<div class="content-wrapper">
<h1>Duckbilled Platypi of the World Unite!</h1>
<div class="float-left">
<p class="site-title">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.duckbillplatypi.com" data-text="Czech out these Duckbilled Platypi" data-via="W_Epominandes_Blab">Tweet</a>
<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
<div class="fb-like" data-href="http://www.duckbilledplatypi.com" data-send="false" data-width="450" data-show-faces="true" data-font="segoe ui"></div>
...and the Javascript (in context) just before the html shown above:
...以及上面显示的 html 之前的 Javascript（在上下文中）：
</head>
<body>
<div id="fb-root"></div>
<script>(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<header>
What adjustment need I make to get them to look "straightedged"?
我需要做哪些调整才能让它们看起来“直”？
UPDATE
更新
Changing it to this:
改成这样：
<div display:inline-block vertical-align:top>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.duckbilledplatypi" data-text="Duckbilled Platypi are awesomer by half again as much as Tapirs!" data-via="BClayShannon">Tweet</a>
<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
</div>
<div display:inline-block vertical-align:top class="fb-like" data-href="http://www.duckbilledplatypi" data-send="false" data-width="450" data-show-faces="true" data-font="segoe ui"></div>
...did nothing.
...什么也没做。
Nor did using this instead:
也没有使用它来代替：
display="inline-block" vertical="align-top"
(which is, I assume, what it should be for html, rather than the CSS-style I had before)
（也就是说，我假设 html 应该是什么，而不是我以前的 CSS 样式）
UPDATE
更新
A related problem (clicking the cute little icons don't do anything/go anywhere) is defined here: http://forums.asp.net/p/1932048/5493924.aspx/1?Why+does+my+Linkshare+or+_SiteLayout+code+fail+in+my+azurewebsites+app+site+
一个相关的问题（点击可爱的小图标不做任何事情/去任何地方）在这里定义：http: //forums.asp.net/p/1932048/5493924.aspx/1?Why+does+my+Linkshare+或+_SiteLayout+code+fail+in+my+azurewebsites+app+site+
回答by Niels Keurentjes
Put them both in wrapper divs with display:inline-blockand use vertical-align:top(or center) to align them however you want. If you want further finetuning, put marginon the wrapper div with a few pixels to have pixel-perfect positioning.
将它们都放在包装器 div 中，display:inline-block并使用vertical-align:top（或center）根据需要对齐它们。如果您想要进一步微调，请margin使用几个像素放置包装器 div 以获得像素完美的定位。
回答by Pablo Irurzun
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="https://www.facebook.com/photo.php?fbid=10151617734241936&set=a.149725616935.112820.133107276935&type=1"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/photo.php?fbid=10151617734241936&set=a.149725616935.112820.133107276935&type=1">Post</a> by <a href="https://www.facebook.com/PeterPan">Peter Pan</a>.</div></div>
