0

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.

Here's the html in its current vertical orientation (twitter on top, facebook below):

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

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

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+

4

2 回答 2

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>
于 2013-08-23T07:44:21.060 回答
2

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

于 2013-05-05T14:21:20.173 回答