css - 环绕 float 元素的自定义列表项背景

Question

我在使用自定义列表图像时遇到问题/其中图标隐藏在列表环绕的 float 元素后面。

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

Source

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