CSS列表项使用精灵表

请大家看我的片段在这里背景大小： http://jsfiddle.net/33fmA/CSS列表项使用精灵表

<div style="width:140px;border:1px solid blue;"> 
<ul> 
    <li>Item 1</li>  
    <li>Item 2 with more text</li> 
    <li>Item 3</li> 
</ul> 
</div>

我试图CSS样式子弹像一个无序列表，问题是，我可以为了得到适当的盘旋，我们设置了一个固定的background-imageheight的16px。这就是为什么具有多行的列表项目的子弹图像看起来很丑。

是否有解决方案，而不必添加额外的元素和浮动/造型？

感谢

来源

2014-02-19 Fuxi

使用:before伪这里..现在你的解决方案的问题是当你使用精灵，你需要一个元素具有固定的尺寸，使用background-size将调整整个图像的大小，而不是图像的特定部分。

所以在这里，我创建使用CSS :before伪虚拟元素，我分配一些固定的尺寸，这也确保，如果你不使用position: absolute;比确保你声明display: inline-block;作为:before伪生成的内容直列默认为。

li:before { 
    content: ""; 
    position: absolute; 
    left: 0; 
    height: 16px; 
    width: 16px; 
    top: 1px; 
    background-image: /* Your base_64 junk */ 
}

Demo

Demo 2（悬停最后li用于有源子弹状态）

来源

2014-02-19 10:58:00

这就是为什么我们有时用一个单独的图标标签一样

<span class="icon-cog"></span>

或

<i class="icon-bullet"></i>

这样就可以给该图标你需要的大小。

然后，您可以使用背景大小和位置进行大量配置。

来源

2014-02-19 10:55:31 miguelmpn

CSS列表项使用精灵表

回答

相关问题