如何使用图标创建平面菜单结构？

Question

我有一个无序列表......

<ul class="dangling-menu">
<li><i class="fa fa-trophy fa-2x full-line"></i>l1</li>
<li><i class="fa fa-cogs fa-2x full-line"></i>l2</li>
<li><i class="fa fa-lightbulb-o fa-2x full-line"></i>l3</li>
<li><i class="fa fa-flask fa-2x full-line"></i>l4</li>
</ul>

我想把这个列表平放[并排，即]。显示：内联为我做。

.dangling-menu{
    text-align:center;
    border-bottom:1px #e8e8e8 solid;
}
.dangling-menu li{
    list-style-type:none;
}
.full-line{
    display:block;
}

几乎一切都还可以......除了李是垂直的。我希望布局是水平的。请协助。

这就是它的样子......

我希望图标彼此相邻，但下面的文字应该是原样的。

Answer 1

您只需将display: inline-block;添加到.dangling-menu课程中，如下所示：

.dangling-menu li{
    list-style-type:none;
    display: inline-block;
}

JsFiddle：http://jsfiddle.net/ghorg12110/e2aufjcc/1/

Answer 2

替换

.dangling-menu li{
    list-style-type:none;
}

带

.dangling-menu li{
    list-style-type:none;
    float:left;
}

Answer 3

试试这个

.dangling-menu{
    text-align:center;
    border-bottom:1px #e8e8e8 solid;
}
.dangling-menu li{
    list-style-type:none;
   display:inline-block;
  margin-right:10px;
}
.full-line{
    vertical-align:middle;
}