使用精灵时在列表标签内设置背景宽度/高度

Question

好的，我有一种情况需要为列表项目符号显示自定义图像；显然你可以通过 list-style-image;但是我想使用精灵。

所以我遇到的另一种方法是将背景放在 li 本身上，但是无法限制更多精灵显示的背景 width/height。

我读 this solution 但是..

出于某种原因它似乎对我不起作用 - 没有背景图片全部显示
我想支持 IE8（不过额外的样式没问题）

我也试过做这样的事情并在里面浮动 div:

<ul>
    <li>
        <div class="icon"></div>
        <div class="text"></div>
    </li>
    <li>
        <div class="icon"></div>
        <div class="text"></div>        
    </li>
</ul>

...但是如果文本换行到下一行，它将位于图标下方，因为图标高度不够高。

这里有什么我可以做的吗？

Answer 1

您可以使用伪 :before 元素来设置列表样式

ul {
    list-style:none;
    padding: 0 0 0 40px;
}
ul li {
    position:relative;
    margin:5px 0;
}
ul li:before {
    content:'';
    background: url('http://blog.fogcreek.com/wp-content/uploads/2013/01/sprite.png') no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    border: 1px solid black;
    vertical-align: middle;
    background-position: -197px 0px;
    position: absolute;
    left: -34px;
    background-size: 492px auto;
}

<ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. amet, consectetuer adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing amet, consectetuer adipiscing elit. elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ul>

使用精灵时在列表标签内设置背景宽度/高度

Set background width / height within list tag whilst using sprites

css

background-image

html-lists

使用精灵时在列表标签​​内设置背景宽度/高度

Set background width / height within list tag whilst using sprites

css

background-image

html-lists

使用精灵时在列表标签内设置背景宽度/高度