html - 如何并排对齐 facebook 和 twitter 共享按钮？

Question

我目前在对齐 facebook 分享按钮和 tweet 按钮时遇到问题，因为我的 CSS 很弱。这是我的代码:

<div class="fb-share-button" data-href="http://www.hootpile.com/<?php echo $username; ?>" data-layout="button"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="" data-text="check out my profile on Hootpile" data-via="hootpile" data-count="none">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>

但他们之间似乎并不一致。

Answer 1

您的问题与结构有关。一个是 DIV，另一个是 A 链接。

你应该将两者都放入 li 列表中请参阅下面的示例，只需调整链接的 img uri 和目标

.social-icon-fb {
  background: url('../images/social-icon-fb.png') no-repeat;
  width: 42px;
  height: 42px;
  display: block;
}
.social-icon-twitter {
  background: url('../images/social-icon-twitter.png') no-repeat;
  width: 42px;
  height: 42px;
  display: block;
}

<ul class="list-inline">
    <li>
        <a href="https://www.facebook.com/">
            <span class="social-icon-fb"></span>
        </a>
    </li>

    <li>
        <a href="https://www.twitter.com/">
            <span class="social-icon-twitter"></span>
        </a>
    </li>

</ul>