水平排列的fontawesome圖標

我有一個無序列表，我有一些字體很棒的圖標。我正在嘗試水平對齊它們。當我將它們水平對齊時，它們彼此堆疊在一起。不知道我做錯了什麼。水平排列的fontawesome圖標

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>

enter image description here

來源

2015-02-10 MindGame

發現問題，現場演示（帶圖標）http://jsfiddle.net/u0fL7rvx/

我不知道爲什麼字體真棒添加position:absolute的圖標。您可以添加以下規則將其設置爲static。

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

來源

2015-02-10 18:17:42 Stickers

簡單得多，你的標記改爲

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

來源

2015-02-10 18:32:42

水平排列的fontawesome圖標

回答

相關問題