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列表項使用精靈表

回答

相關問題