【问题标题】:How can I get the Twitter and Facebook buttons to horizontally align?如何让 Twitter 和 Facebook 按钮水平对齐?
【发布时间】:2013-08-29 01:16:44
【问题描述】:

使用它们允许您生成的 html,我在我的网站上添加了 Twitter 和 Facebook 的“Like”按钮。它们垂直对齐很好,但这占用了太多空间 - 我宁愿水平对齐它们。所以我从 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+

【问题讨论】:

    标签: javascript html twitter facebook-like


    【解决方案1】:

    将它们都放在带有display:inline-block 的包装器div 中,并使用vertical-align:top(或center)根据需要对齐它们。如果您想进一步微调,请将margin 放在带有几个像素的包装器 div 上,以获得像素完美的定位。

    【讨论】:

    • Urrr 你学过基本的 HTML/CSS 吗?应用内联样式的正确语法是&lt;div style="display:inline-block;vertical-align:top"&gt;
    【解决方案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>
    

    【讨论】:

    • 尝试格式化您的代码(不是很成功;-)请编辑和改进。
    • 请正确解释,以便更好地理解用户。
    猜你喜欢
    • 2012-02-26
    • 2016-04-07
    • 1970-01-01
    • 2020-10-08
    • 1970-01-01
    • 1970-01-01
    • 2017-03-09
    • 2014-04-20
    • 1970-01-01
    相关资源
    最近更新 更多