CSS线，与社交图标对齐

我想让这条线正常工作，但我似乎无法弄清楚。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%; 
}

来源

2014-09-04 lllllllllllll

如果你能提供一个小提琴，我可以更好地帮助你。 – 2014-09-04 23:01:42

更换

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

与

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

Demo

来源

2014-09-04 23:05:58 Oriol

CSS线，与社交图标对齐

回答

相关问题