Question

使用自定义列表图像时出现问题/图标隐藏在列表所包含的浮动元素后面。

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元素，调整边距和填充。

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

http://jsfiddle.net/z8m46/

自定义列表项背景包裹浮动元素

2 个答案: