Question

使用他们允许你生成的html，我在我的网站上添加了Twitter和Facebook“赞”按钮。它们垂直对齐就好了，但占用了太多空间 - 我宁愿水平对齐它们。所以我从facebook按钮中删除了“div”。确实如此将facebook按钮放在Twitter按钮的右侧，但有点歪斜/叉腰。

这是当前垂直方向的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>

...和上面显示的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>

我需要做些什么调整让他们看起来“直截了当”？

更新

将其更改为：

<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>

......什么都没做。

也没有使用它：

display="inline-block" vertical="align-top"

（我认为，对于html应该是什么，而不是我以前的CSS风格）

更新

此处定义了一个相关问题（点击可爱的小图标不做任何事情/去任何地方）：http://forums.asp.net/p/1932048/5493924.aspx/1?Why+does+my+Linkshare+or+_SiteLayout+code+fail+in+my+azurewebsites+app+site+

Answer 1

将它们放在包含display:inline-block的包装div中，并使用vertical-align:top（或center）按照您的需要对齐它们。如果你想进一步微调，可以将margin放在包含几个像素的包装div上，以获得像素完美的定位。

Answer 2

<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&amp;set=a.149725616935.112820.133107276935&amp;type=1"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/photo.php?fbid=10151617734241936&amp;set=a.149725616935.112820.133107276935&amp;type=1">Post</a> by <a href="https://www.facebook.com/PeterPan">Peter Pan</a>.</div></div>

如何让Twitter和Facebook按钮水平对齐？

更新

更新

2 个答案: