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

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

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>

您需要将display:inline块放在li上，而不是放在ul上。

尝试以下操作：

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

---

虽然这段代码可以回答这个问题，但最好包含一些上下文，解释它是如何工作的以及何时使用它。从长远来看，只使用代码的答案是没有用的。

 .social li{
   display:inline-block; 
  }

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