html - 如何创建带有图标的平面菜单结构？

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>

我想让这个列表变平[并排，即]。 display:inline 帮我做了。

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

几乎一切正常...除了 li 是垂直的。我希望布局是水平的。请协助。

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

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

Answer 1

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

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

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