Как создать плоскую структуру меню с иконками?

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/

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