防止列表中的文本包装在图标项目符号下？

I've built and styled lists before, but this list is made from a Font Awesome font and it's made with a div (it's not global).

我之前已经构建并设置了样式列表,但是这个列表是用Font Awesome字*作的,它是用div制作的(它不是全局的)。

I started off this this:

我开始这个:

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

No matter what I have tried, can't get text to stop wrapping under bullet. Also need to get list elements up a little so they line up with font. Here is a link to test site: link to live test site

无论我尝试过什么,都无法让文字停止包裹在子弹下。还需要稍微获取列表元素,以便它们与字体对齐。以下是测试站点的链接:链接到实时测试站点

I've tried "display: inline-block" and "list-style-position: outside" with no luck. I might have had them in the wrong place. Thanks for any suggestions.

我试过“display:inline-block”和“list-style-position:outside”,没有运气。我可能把它们放在了错误的地方。谢谢你的任何建议。

4 个解决方案

#1

add this styles set position:absolute to li:before and li position:relative

添加此样式设置位置:绝对到li:之前和li位置:相对

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

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

#2

Just add position relative to li:before and move it using negative top and left

只需添加相对于li的位置:之前使用负顶部和左侧移动它

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

#3

I think I got it to show the way you wanted

我想我是为了展示你想要的方式

Fiddle: 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;
}

#4

Add this code for taking list element upside

添加此代码以获取列表元素的优势

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

#1