我关注了这个example来自 github 要点以在相同高度对齐类似社交的按钮,但我不确定为什么它没有与我的版权文本对齐。它在新行下显示按钮,但我希望它与版权文本显示在同一行。我也为此使用 Bootstrap。我该如何解决这个问题?
html:
<footer class="footer">
<div class="container">
<span class="copyright text-muted">Copyright ©2016 example.com. All Rights Reserved</span>
<div class="social">
<span class="twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.example.com">Tweet</a>
</span>
<span class="Facebook"><iframe src="https://www.facebook.com/plugins/like.php?href=https://gist.github.com/thebigreason/1296097&show_faces=false&layout=button_count" scrolling="no" frameborder="0" style="height: 21px; width: 100px" allowTransparency="true"></iframe>
</span>
<span class="google">
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300"></div>
</span>
</div>
</div>
</footer>
CSS:
.footer {
position: absolute;
bottom: 30px;
width: 100%;
/* Set the fixed height of the footer here */
height: 0px;
background-color: transparent;
}
/* This gets Google to fall into place */
.social {
font-size: 1px;
}
/* This gets Facebook to fall into place */
.social iframe {
vertical-align: bottom;
}
/* Set an optional width for your button wrappers */
.social span {
display: inline-block;
width: 110px;
}
/* Adjust the widths individually if you like */
.social .google {
width: 75px;
}
最佳答案
只需添加此 css。
.container span, .container .social {
display: inline-block;
}
关于html - 如何在页脚内的版权文本旁边对齐社交按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38196333/