admin管理员组

文章数量:1277281

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="" class="twitter-share-button" data-url="" 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/widgets.js'; 
fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>

                    <div class="fb-like" data-href="" 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/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="" class="twitter-share-button" data-url="" 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/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="" 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: .aspx/1?Why+does+my+Linkshare+or+_SiteLayout+code+fail+in+my+azurewebsites+app+site+

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./share" class="twitter-share-button" data-url="http://www.duckbillplatypi." 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./widgets.js'; 
fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>

                    <div class="fb-like" data-href="http://www.duckbilledplatypi." 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/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./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./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/p/1932048/5493924.aspx/1?Why+does+my+Linkshare+or+_SiteLayout+code+fail+in+my+azurewebsites+app+site+

  • javascript
  • html
  • twitter
  • facebook-like
Share Improve this question edited Aug 28, 2013 at 17:16 B. Clay Shannon-B. Crow Raven asked May 5, 2013 at 14:14 B. Clay Shannon-B. Crow RavenB. Clay Shannon-B. Crow Raven 10.3k157 gold badges500 silver badges896 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

Put them both in wrapper divs with display:inline-block and use vertical-align:top (or center) to align them however you want. If you want further finetuning, put margin on the wrapper div with a few pixels to have pixel-perfect positioning.

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

本文标签： javascriptHow can I get the Twitter and Facebook buttons to horizontally alignStack Overflow

版权声明：本文标题：javascript - How can I get the Twitter and Facebook buttons to horizontally align? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741214782a2359837.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。