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

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元素。它定义了一个块级别的框

来源

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

Answer 2

处理ul元素，调整边距和填充。

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

http://jsfiddle.net/z8m46/