글 머리 기호에 배경이있는 경우 목록의 두 번째 줄을 들여 쓰는 방법은 무엇입니까?

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는 display: table-cell와 "충돌"에 보인다.

이 방법을 사용하는 방법에 대한 아이디어가 있으십니까? ->jsfiddle

Answer 1

<li>에 대한 <li>

:before에 대한 사용 position:absolute

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

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

DEMO

Answer 2

및 padding-left에 대한 :before 및 padding-left에 대한 사용 position:absolute하지만 left 또는 top를 사용하지 마십시오. 대신 여백을 사용하십시오. 총알이없는 목록 항목에, 부모 컨테이너에 충실합니다 left` 경우

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