理解 ul/ol 元素的 list-style-image

list-style-image元素可以为 ul 或者 ol 元素的列表项设置标记图案。配合这个属性的还有 list-style-position,可以用它来控制图案展示的位置。

list-style-position: outside /  inside;
list-style-image: url();

list-style-position 的默认值为 outside，其图案的显示原理是显示在 ul 元素的左内边距上，所以如果你的图片太大，需要自己手动调整左内边距的大小以使得可以正确的展示出这些图片：

当 list-style-position 的值设置为 inside 时，其图案将显示在内容空间中：

实际的表现类似在每个 li 元素中插入了一个img元素的行内元素，如下测试中，修改了 li 元素中单独包裹的 的 vertical-align 属性后，图标和内容出现了不同的位置关系：

<ul style="list-style-position: inside;">
    <li>
        <span style="line-height: 40px;vertical-align: bottom;">咖啡</span>
    </li>
    <li>茶</li>
    <li>可口可乐</li>
</ul>

另外当 li 元素的 display 不是 block 或者处于 float 时，列表图标将不展示。