Question

我尝试弄乱CSS和html代码，但似乎根本无法使社交图标对齐。我想将Facebook和Twitter的共享按钮彼此对齐，并在它们之间使用部分填充。

这是当前的样子：

代码如下：

            <div class="col-md-6">
                <div class="heading display-3 mb-4"><span style="-webkit-text-stroke: 2px black;"></span>Saint Louis Events</div>
                <p class="headingParagraph">Don't know who we are? What we do? There's no doubt that we are the ultimate underdogs, but usually the smallest bark the loudest and we're here to stay.
                    <br><b>We will prevail. We will impress. We are here for you.</b>
                </p>
                <div class="svg-wrapper">
                    <svg height="40" width="180" xmlns="http://www.w3.org/2000/svg">
                      <rect class="shape" height="40" width="180" />
                    </svg>
                      <div class="text">ABOUT US</div>
                </div>
                <span>
                    <div class="fb-share-button" data-href="http://www.eventsinstlouis.com/" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.eventsinstlouis.com%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
                </span>
                <span>
                    <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-url="http://www.eventsinstlouis.com/" data-hashtags="stlouisevents" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                </span>
            </div>

Answer 1

我能够找到Facebook在哪里定义了vertical-align：bottom属性，但是我看不到可以定义的类来覆盖它，我将如何覆盖它呢？

Answer 2

<!DOCTYPE html>
<html>
<head>
<style>
.facebook , .twitter
{
float:left;
margin-right:20px;
}
</style>
</head>
<body>
<span class="facebook">facebook</span><span class="twitter">tweet</span>
</body>
</html>

无法使用跨度/格使社交按钮对齐

2 个答案: