如何用圖標創建平面菜單結構？

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; 
} 

幾乎所有東西都可以......除了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/

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; 
}