HTML/CSS同一行并居中

Question

我在找人帮忙！我想集中一些社交媒体的形象，但我也希望他们在同一条线上！我正在使用引导程序，并且希望它能够响应。

这是HTML代码。我有其他信息和其他信息的其他二-lg-4！

<div class="col-lg-4 text-center test">
<hr>
<h4>Följ oss</h4>
<hr>
<ul>
    <li><a href="#" class="twitter" target="_blank"></a></li>
    <li><a href="https://www.facebook.com/smartfeeduf" class="facebook" target="_blank"></a></li>
    <li><a href="http://instagram.com/smartfeed_uf" class="instagram"></a></li>
    <li><a href="#" class="tumblr" target="_blank"></a></li>
    <li><a href="#" class="rss" target="_blank"></a></li>
    <li><a href="kontakt.html" class="email"></a></li>
    </ul>

​

我已经尝试了这个CSS，我几乎完全是我想要它。

.twitter, .facebook, .instagram, .tumblr, .rss, .email{
margin: 5px;
width: 50px;
height: 50px;
display:inline-block;

vertical-align: baseline;
text-align:center;}

对每个人来说，图像都是这样加载的：

.twitter{ background:transparent url(../img/social/twitter-b.png) center top no-repeat;}

.twitter:hover{ background-image: url(../img/social/twitter-dl.png);}

当我拥有这一切的时候，它就会像这样出现

​

​

右边你可以看到我的图标。我唯一想做的就是把他们放在同一条线上。但没起作用。请帮助我:)

Answer 1

将样式放在li元素上。

li.social {
    margin: 5px;
    width: 50px;
    height: 50px;
    display:inline-block;
    text-align:center;
}

<ul>
    <li class="social"></li>
</ul>

Answer 2

添加到css中：

li{

    display:inline;

}

默认情况下，li元素将垂直列出，除非您将它们设置为内联。完成此操作后，您可能需要调整填充/边距。