block will not change elements in my unordered list to horizontal display

I have three list items that are in a unordered list between some text. When I change the display to inline block it still keeps the vertical orientation. What is keeping the list items from being displayed horizontally?

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>

Here is the CSS:

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

---

 .social li{
   display:inline-block; 
  }

你需要在li上显示：inline-block而不是ul。

---

尝试这个：

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

链接地址: http://www.djcxy.com/p/29996.html

上一篇: CSS如何设置div高度减去nPx

下一篇: 块不会将我无序列表中的元素更改为水平显示