css - 围绕浮动元素的自定义列表项背景

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/