水平对齐的 fontawesome 图标答案

【问题标题】：Horizontally aligned fontawesome icons水平对齐的 fontawesome 图标
【发布时间】：2015-02-11 03:27:21
【问题描述】：

我有一个无序列表，其中有一些字体很棒的图标。我正在尝试将它们水平对齐。当我将它们水平对齐时，它们会彼此堆叠一点。不知道我做错了什么。

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>

【问题讨论】：

标签： html css font-awesome

【解决方案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/

【讨论】：

【解决方案2】：

发现问题，现场演示（带图标）http://jsfiddle.net/u0fL7rvx/

我不知道为什么 font awesome 将 position:absolute 添加到图标中。您可以添加以下规则将其设置为static。

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

【讨论】：