Question

我正在设计一个有序列表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

Answer 1

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

Answer 2

嗯，另一种方法是将图像添加到每个列表项，然后移动它的位置。见fiddle。我使用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;
}

Answer 3

查看:marker伪元素：

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

CSS Ordered Lists，有没有办法设计数字的背景？

3 个答案: