自定义列表项背景环绕浮动元素

我在使用自定义列表图像时遇到了一个问题,其中图标被隐藏在列表包裹的浮动元素后面。

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/ )但这会导致长列表出现在图标下方