防止列表中的文字從圖標項目符號下方摺疊？

我已經構建並設計了列表，但是此列表是由Font Awesome字體制作的，並且使用了div（它不是全局的）。防止列表中的文字從圖標項目符號下方摺疊？

我開始了這本：

ul.fa-ul2 li:before { 
    font-family: FontAwesome; 
    content: '\f058'; 
    color: #6190C3; 
    font-size: 28px; 
    padding-right: 10px; 
    margin-left: -15px; 
}

不管是什麼我都試過了，不能讓文字停止下子彈包裹。還需要讓列表元素稍微增加一點，以便與字體保持一致。這裏是一個鏈接到測試網站： link to live test site

我試過「顯示：內聯塊」和「列表式位置：外」沒有運氣。我可能讓他們錯了地方。感謝您的任何建議。

來源

2014-11-22 Andrew

添加本樣式設置position:absolute到li:before和李position:relative

ul.fa-ul2 > li{ 
position: relative; 
} 

ul.fa-ul2 li:before { 
position: absolute; 
left: -13px; 
}

來源

2014-11-22 03:48:06

謝謝，工作完美 – Andrew 2014-11-22 04:53:24

的歡迎@Andrew – 2014-11-22 06:55:33

相對位置只需添加到li:before，並使用負top和left

ul.fa-ul2 li:before { 
    position: relative; 
    top: -20px; 
}

來源

2014-11-22 03:55:22

移動它，我想我得到了它的顯示你想要的方式

小提琴： http://jsfiddle.net/a5w5pvr1/1/

ul.fa-ul2 li:before { 
    font-family: FontAwesome; 
    content:'\f058'; 
    color: #6190C3; 
    font-size: 28px; 
    padding-right: 5px; 
    margin-left: -1.1em; 
} 

li { 
    list-style-type: none; 
    display: block; 
    margin-left: 1em; 
    margin-top: 0.5em; 
}

來源

2014-11-22 04:16:18 ochi

感謝，但我試圖避免的東西，會影響全球的李。我感謝你的時間。 – Andrew 2014-11-22 04:54:10

當然，你可以將它限制在'ul.fa-ul2 li'（而不是'li'） – ochi 2014-11-22 04:56:10

添加該代碼採取列表元素顛倒

ul.fa-ul2 li:before{ 
top: 5px; 
}

來源

2014-11-22 04:47:12 nikita

防止列表中的文字從圖標項目符號下方摺疊？

回答

相關問題