html - CSS线，与社交图标对齐

我试图使这条线正常工作，但似乎无法弄清楚。

这就是我要的：



这是我的代码：

<ul>
    <li style="margin-top:0px;"><h2>Follow Us</h2></li>
    <li><a href="#"><i style="color:#00aced;" class="fa fa-twitter-square fa-2x"></i></a></li>
    <li><a href="#"><i style="color:#3B5998;" class="fa fa-facebook-square fa-2x"></i></a></li>
    <li><a href="#"><i style="color:#007bb6;" class="fa fa-linkedin-square fa-2x"></i></a></li>
    <li><a href="#"><i style="color:#dd4b39;" class="fa fa-google-plus-square fa-2x"></i></a></li>
    <li><a href="#"><i style="color:#FE0883;" class="fa fa-flickr fa-2x"></i></a></li>
    <li><a href="#"><i style="color:#bb0000;" class="fa fa-youtube-square fa-2x"></i></a>  </li>
    <li><a href="#"><i style="color:#FA9B39;" class="fa fa-rss-square fa-2x"></i></a></li>
</ul>

#all-section ul li {
    display: inline;
}
#all-section ul:after {
    background-color: #b7b7b7;
    border-bottom: 1px solid #fff;
    content: "";
    display: inline-block;
    height: 2px;
    position: relative;
    vertical-align: middle;
    width: 40%;
}

最佳答案

更换

#all-section ul li {
    display: inline;
}

与

#all-section ul > li {
    display: inline-block;
    vertical-align: middle;
}

Demo

关于html - CSS线，与社交图标对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25676243/