Горизонтально выровненные значки шрифтов

Question

У меня есть неупорядоченный список, где у меня есть значки, напоминающие шрифты. Я пытаюсь выровнять их по горизонтали. Когда я выравниваю их по горизонтали, они складываются друг на друга немного. Не уверен, что я делаю неправильно.

CSS:

.tbl-op ul{margin-left: 0;padding: 0;list-style-type: none;color:#2895f1;}.tbl-op li {cursor: pointer;display:inline-block;} 

HTML:

<div class="btn-group tbl-op" role="toolbar"> 
<ul class="fa-ul"> 
    <li><i class="fa-li fa fa-upload" title="Upload"></i>Upload</li> 
    <li><i class="fa-li fa fa-times" title="Delete"></i>Delete</li> 
    <li><i class="fa-li fa fa-edit" title="Edit"></i>Edit</li> 
</ul> 

Answer 1

Проблема найдена, демо (с иконками) http://jsfiddle.net/u0fL7rvx/

Я не знаю, почему шрифт awesome добавляет position:absolute к значкам. Вы можете добавить приведенные ниже правила, чтобы установить его на static.

.tbl-op li .fa-li { 
    position: static; 
} 

Answer 2

гораздо проще, изменить разметку

<ul class="fa-ul"> 
    <li class="fa-li"><i class="fa fa-upload" title="Upload"></i> Upload </li> 
    <li class="fa-li"><i class="fa fa-times" title="Delete"></i> Delete</li> 
    <li class="fa-li"><i class="fa fa-edit" title="Edit"></i> Edit </li> 
</ul> 

и просто стиль в li теги

li { 
    display: inline; 
} 

посмотреть эту скрипку http://jsfiddle.net/81rqm0h7/