2

我正在设计一个有序列表 1、2、3、4 等...

有没有办法在每个数字后面放置一个图像，所以 1、2、3、4 出现在它上面？

例如：

image[1.] List Item 1

image[2.] List Item 2

image[3.] List Item 3

image[4.] List Item 4
4

3 回答 3

3

是的。您可以使用ol .li:before将图像移动到数字后面。您还可以使用list-style-position: inside;将编号移动到列表项本身的内部，然后在li元素上添加背景。

于 2012-08-06T15:46:10.577 回答
1

好吧，另一种方法是将图像添加到每个列表项，然后移动其位置。见小提琴。我使用 div 而不是图像，因为它更容易。然而，这个方法应该在不同的浏览器上进行测试，以确保它看起来不奇怪。

<ol>
    <li> 
        <div class="list-image"></div>
        foo
    </li>    
    <li>
        <div class="list-image"></div>
        bar 
    </li>
</ol>​

CSS：

ol{
   list-style-type:decimal;
   padding:50px 50px;
}

.list-image{
   width:20px;
   height:20px;
   position:relative;
   background-color:lightgray;
   top:20px;
   left:-25px;    
   z-index:-1;
}
​
于 2012-08-06T16:05:12.970 回答
0

查看:marker伪元素：

http://dev.w3.org/csswg/css3-lists/#marker-pseudo-element

于 2012-08-06T15:51:02.223 回答