水平对齐的fontawesome图标

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

更简单,将您的标记更改为

<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/