[英]CSS Ordered Lists, is there a way to style the background of the number?
I'm styling an ordered list 1, 2, 3, 4 etc... 我正在设计1、2、3、4等的有序列表...
Is there a way to place an image behind each number, so the 1, 2, 3, 4 appear on top of it? 有没有办法在每个数字后面放置图像,以便在其顶部显示1、2、3、4?
eg: 例如:
image[1.] List Item 1
image[2.] List Item 2
image[3.] List Item 3
image[4.] List Item 4
Yes. 是。 You could use
ol .li:before
to move the image behind the numbers. 您可以使用
ol .li:before
将图像移动到数字后面。 You could also use list-style-position: inside;
您还可以
list-style-position: inside;
使用list-style-position: inside;
to move the numbering to the inside of he list item itself and then have a background on the li
element. 将编号移到列表项本身的内部,然后在
li
元素上具有背景。
Well, another way to do it would would be to add the image to each list item then shift its position. 嗯,另一种方法是将图像添加到每个列表项,然后移动其位置。 See fiddle .
见小提琴 。 I used divs instead of images because it was easier.
我使用div而不是图像,因为它更容易。 However, this method should be tested across different browsers to make sure it doesn't look weird.
但是,应该在不同的浏览器上测试此方法,以确保它看起来不奇怪。
<ol>
<li>
<div class="list-image"></div>
foo
</li>
<li>
<div class="list-image"></div>
bar
</li>
</ol>
css: 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;
}
Look into the :marker
pseudo-element: 查看
:marker
伪元素:
http://dev.w3.org/csswg/css3-lists/#marker-pseudo-element http://dev.w3.org/csswg/css3-lists/#marker-pseudo-element
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.