Question

我目前在调整facebook分享按钮和推文按钮时遇到问题，因为我在CSS中很弱。这是我的代码：

＆＃13;

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

＆＃13;

但他们似乎并没有相互协调。

Answer 1

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

您应将两者都放入li列表中参见例如，只需改编img uri＆amp;目的地链接

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

Answer 2

将以下CSS类添加到您的页面应该有效。如果您将两个按钮并排放置在包含div中。

.fb_iframe_widget {
   vertical-align: top;
 }

Answer 3

您是否尝试过应用该风格

display: inline-block;

如果您将css应用于两个类的按钮，那么您应该可以让它们对齐..

请查看我的jsfiddle获取css解决方案

https://jsfiddle.net/digitaliss/koo6o16n/

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

3 个答案: