Question

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

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

我看了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元素作为样式列表

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: