UL列出带有样式十进制数的项目

时间:2013-09-05 12:14:47

标签: html css css3

我需要创建一组列表项,我需要使用border-radius和background颜色设置列表项编号(小数)的样式。

以下是我希望列表项看起来如何的快照。

The Image is what I am looking for.

我试图在li上设置边框半径背景,但是我无法获得我想要的输出。

这是我迄今为止尝试过的 WORKING LINK 。我删除了边框半径,背景等,因为它没有正确显示。

HTML:

<ul>
    <li>Text Character</li>
    <li>Text Character</li>
    <li>Text Character</li>
    <li>Text Character</li>
    <li>Text Character</li>
</ul>

CSS:

li{list-style-type:decimal;}

我想为上面的解决方案提供以下内容..

  • 它不应该是精灵/背景图像解决方案
  • 我只是在寻找一个解决方案,我必须在列表项目上使用border-radius和background-color,我尝试过,但是在我的参考图像中无法按照我想要的方式工作。

等待解决方案。

1 个答案:

答案 0 :(得分:5)

这是一个小技巧:

ol {
        counter-reset: item;
        margin-left: 0;
        padding-left: 0;
    }
li {
        display: block;
        margin-bottom: .5em;
        margin-left: 2em;
    }
li:before {
        display: inline-block;
        content: counter(item) "";
        counter-increment: item;
        background: blue;
        color: white;
        display: inline-block;
        border-radius: 50%;
        margin: 0 5px ;
        padding: 0 5px;
    
    }
<ol>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ol>