防止列表中的文字从图标项目符号下方折叠？

问题描述：

我已经构建并设计了列表，但是此列表是由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

我试过“显示：内联块”和“列表式位置：外”没有运气。我可能让他们错了地方。感谢您的任何建议。

答

添加本样式设置position:absolute到li:before和李position:relative

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

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

谢谢，工作完美 – 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; 
}

答

移动它，我想我得到了它的显示你想要的方式

小提琴： 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; 
}

感谢，但我试图避免的东西，会影响全球的李。我感谢你的时间。 – 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; 
}

防止列表中的文字从图标项目符号下方折叠？

相关推荐