:before偽元素模擬list-style-image時, 怎樣模擬list的inside效果?

01-26

背景:
需要給list加list-style-image.
但因為要用sprite生成圖片, 這一步是rails3後台自動完成的, offset不能提前知道. 我所知道的寫法是在scss文件中寫 @include sprite-folder("image-file"). 但這種方法只會生成background的圖片. 不知道對於list-style-image, scss文件應該怎麼寫?

後來想到用li:before來模擬list-style-image. 效果還可以, 但是第二行以後的縮進不對. 有簡單的方法可以模擬list的inside效果么

好吧，我最近團隊的一個項目中也遇到了這樣的問題，先上圖：

行數非常多的時候：

行數少的時候：

如果你想要這樣的效果，那麼我說一下實現思路：

這種布局的難點在於左側列表項需要寬度自適應，也就是當行數很多的時候，前面想列表項寬度會變得很大，通常的 list-style 只能固定一個最大寬度，無法滿足自適應的需求。

這裡的核心在於使用CSS3 display:table-cell，當然不支持IE6-7，現代瀏覽器獲得最佳效果。

ol{display:table;}
li{counter-increment: list; display:table-row;}
li:before{ content:counter(list)"."; min-width:30px; display: table-cell; text-align:right; }
li:last-child { counter-reset: list 284801; }/* 僅供測試 */

具體的例子請看：http://www.iyunlu.com/demo/list-type/

左浮動或將其顯示為行內塊都可以達到目的，看你自己的喜好。