Question

之前我已经构建并设置了样式列表，但是这个列表是由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

我已经尝试过＆＃34;显示：inline-block＆＃34;和＆＃34; list-style-position：outside＆＃34;没有运气。我可能把它们放在了错误的地方。谢谢你的任何建议。

Answer 1

将此样式集position:absolute添加到li:before和li position:relative

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

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

Answer 2

只需添加相对于li:before的位置，然后使用否定top和left

移动它

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

Answer 3

我想我是为了表明你想要的方式

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

Answer 4

添加此代码以获取列表元素上升

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

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

4 个答案: