【发布时间】: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