水平对齐的 fontawesome 图标
Horizontally aligned fontawesome icons
我有一个无序列表,其中有一些字体很棒的图标。我试图水平对齐它们。当我水平对齐它们时,它们会稍微堆叠在一起。不确定我做错了什么。
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>
发现问题,现场演示(带图标)http://jsfiddle.net/u0fL7rvx/
我不知道为什么 font awesome 在图标上添加 position:absolute
。您可以添加以下规则将其设置为 static
.
.tbl-op li .fa-li {
position: static;
}
更简单,将标记更改为
<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;
}
看到这个fiddlehttp://jsfiddle.net/81rqm0h7/
我有一个无序列表,其中有一些字体很棒的图标。我试图水平对齐它们。当我水平对齐它们时,它们会稍微堆叠在一起。不确定我做错了什么。
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>
发现问题,现场演示(带图标)http://jsfiddle.net/u0fL7rvx/
我不知道为什么 font awesome 在图标上添加 position:absolute
。您可以添加以下规则将其设置为 static
.
.tbl-op li .fa-li {
position: static;
}
更简单,将标记更改为
<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;
}
看到这个fiddlehttp://jsfiddle.net/81rqm0h7/