内联块不会将我的无序列表中的元素更改为水平显示

Question

我有三个列表项在一些文本之间的无序列表中。当我将显示更改为内联块时，它仍然保持垂直方向。什么是保持列表项水平显示？

div class="row">
      <div class="icons">
    <ul class="social">
        <li><a href="#" class="button social"><i class="fa fa-fw fa-linkedin"></i></a></li>
        <li><a href="#" class="button social"><i class="fa fa-fw fa-github"></i></a></li>
        <li><a href="#" class="button social"><i class="fa fa-fw fa-twitter"></i></a></li>
      </ul>
      </div>
    </div>

这是CSS：

.social{
  list-style: none;
  display:inline-block; 
}

Answer 1

 .social li{
   display:inline-block; 
  }

您需要将display：inline-block放在li而不是ul。

Answer 2

试试这个：

.social > li {
    display: inline-block;
}