自定義列表項背景纏繞浮動元素

Question

我使用自定義列表圖像時出現問題/其中圖標隱藏在列表中的浮動元素後面。

http://jsfiddle.net/V8evM/

HTML

<div> 

</div> 
<ul> 
    <li>This is list item no 1</li> 
    <li>This is list item no 2. This is list item no. This is list item no. This is list item no. This is list item no. This is list item no. This is list item no.</li> 
    <li>This is list item no 3</li> 
</ul> 

CSS

div { 
    background: rgba(0,0,0,0.8); 
    float: left; 
    width: 100px; 
    height: 40px; 
    margin: 0 20px 10px 0 
} 

li { 
    padding-left: 1.3em ; 
} 

li:before { 
    content: "i"; 
    display: inline-block; 
    margin-left: -1.3em; 
    width: 1.3em; 
} 

注：我不想增加額外的標記，只有CSS。

我已經試過沒有切緣陰性（http://jsfiddle.net/9qWGE/），但是這會導致一長串圖標

Answer 1

ul { 
    display: table; /* or table-cell */ 
} 

table下出現：行爲就像<table> HTML元素。它定義了一個塊級框。

Source

http://jsfiddle.net/PWQZS/1/

Answer 2

ul元素上工作，院校佈局結構調整你的margin和padding。

ul { 
    padding-left:10px; /* fit this number to your needs */ 
    margin-left:111px; /* fit this number to your needs */ 
} 

http://jsfiddle.net/z8m46/