你可以为有序列表编号吗？ [英] Can you style ordered list numbers?

问题描述

我试图找到一种方式来排序列表中的数字，我想添加背景颜色，边框半径和颜色，以便他们可以匹配我工作的设计： / p>

>

我猜这是不可能的，我必须为每个数字使用不同的图像，

ol li：first-child {list-style-image：url（'1.gif'）};
ol li：nth-​​child（2）{list-style-image：url（'2.gif'）;}等...

我想我可以使用精灵来使这个略好一点，但是有更简单的解决方案吗？

解决方案

您可以使用 CSS计数器以及：before 伪元素：

  body {counter-reset：item; } ol {list-style：none; } li {counter-increment：item; margin-bottom：5px } li：before {margin-right：10px;内容：counter（item）;背景：lightblue; border-radius：100％;颜色：白色; width：1.2em; text-align：center; display：inline-block; }  

 < ol& < li> item< / li> < li> item< / li> < li> item< / li> < li> item< / li>< / ol>  

I'm trying to find a way to style the numbers in a ordered list, I'd like to add background-color, border-radius and color to them so they can match the design I'm working from:

I'm guessing it's not possible and that I'll have to use different images for each number i.e.

ol li:first-child{list-style-image:url('1.gif')}; ol li:nth-child(2) {list-style-image:url('2.gif');} etc...

I was thinking I could use sprites to make this slightly better but is there any simpler solution?

解决方案

You can do this using CSS counters, in conjunction with the :before pseudo element:

 body {
   counter-reset: item;
 }
 ol {
   list-style: none;
 }
 li {
   counter-increment: item;
   margin-bottom: 5px;
 }
 li:before {
   margin-right: 10px;
   content: counter(item);
   background: lightblue;
   border-radius: 100%;
   color: white;
   width: 1.2em;
   text-align: center;
   display: inline-block;
 }

<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

这篇关于你可以为有序列表编号吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！