如果子弹有背景，如何缩进列表中的第二行？

Question

我有一个无序列表，其中使用FontAwesome创建项目符号，一些背景和边框半径。

我希望第二行文字在第一行之下，而不是在子弹之下。

li::before {
    display: table-cell;
    padding-right: .3em;
    content: "\f00c";
    float: left;
    margin: 0 9px 0 0;
    font: 10px 'FontAwesome';
    width: 20px;
    height: 20px;
    position: relative;
    background: #3498db;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    color: #FFF;
}

不知怎的float: left似乎＆＃34;冲突＆＃34;与display: table-cell。

有关如何使其发挥作用的任何想法？ - ＆GT; jsfiddle

Answer 1

position:absolute使用:before，padding-left使用<li>

li {
    position:relative;
    padding-left:32px;
}

li::before{
    position:absolute;
    top:0;
    left:0;
}

DEMO

Answer 2

对position:absolute使用:before，padding-left使用<li>，但不要使用left或top。改为使用边距。

http://jsfiddle.net/semencov/vvLtj43g/