html - 如何一一设置社交图标和文字？

Question

这是我的 jsfiddle 链接:http://s30.postimg.org/44jynnz35/Untitled_2.png

现在显示是这样的http://s30.postimg.org/44jynnz35/Untitled_2.png

我需要一个接一个垂直对齐。

<div id="social-bar">
                <a href="https://www.facebook.com/pages/Open-Source-Hacker/181710458567630">
                    <i class="icon icon-facebook"></i>
                    <span>Facebook</span>
                </a>
                <a href="https://twitter.com/moo9000">
                    <i class="icon icon-twitter"></i>
                    <span>Twitter</span>
                </a>
                <a href="https://plus.google.com/103323677227728078543/">
                    <i class="icon icon-google-plus"></i>
                    <span>Google Plus</span>
                </a>
                <a href="http://opensourcehacker.com/">
                    <i class="icon icon-rss"></i>
                    <span>Blog</span>
                </a>
            </div>

我可以知道，修复此问题的确切 css 属性是什么吗？

提前致谢。

Answer 1

默认情况下， anchor 是内联的。在您的 CSS 中使用它:

#social-bar a {
display:block;
}