具有带样式十进制数字的UL列表项

Question

具有带样式十进制数字的UL列表项

htmlcss

4

我需要创建一组列表项，其中我需要用边框半径和背景颜色样式化列表项编号（小数）。

这是我想让我的列表项看起来的快照。

我正在寻找的图片。

我尝试在li上设置边框半径、背景，但我无法得到我要寻找的输出。

这里是我迄今为止尝试过的一个有效链接。我删除了边框半径、背景等，因为它们没有正确显示。

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在列表项上，但是我尝试过了，并不能达到我想要的参考图像效果。

期待您的解决方案。

- Nitesh

你尝试过在 li 上使用背景图像吗？ - Terry

1

从标记的角度来看：为什么不使用有序列表（<ol>）呢？ - worenga

我几年前回答过一个几乎相同的问题。请参见上面的重复链接。我认为我在那里给出了一个相当好的解决方案。 - Spudley

@Spudley - 此外，在您的帖子中，OP已经对HTML进行了更改，而在我的情况下，我只能将<ul>更改为<ol>，而在标记中不能添加<span>等其他内容。 - Nitesh

@NathanLee - 另一个问题中的跨度是他努力使项目水平对齐的结果，因此与您的问题无关。对他来说也不必要; 我的答案不需要它。在我回答的选项中，我偏爱的是基本上与您在这里接受的答案相同的解决方案，尽管确实乔纳斯已经给出了完整的代码，而我之前只给出了关键点，并让他自己解决其余部分。无论如何，我很高兴您已经得到了想要的解决方案。 - Spudley

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonas Grumann · Accepted Answer

这里有一个小技巧：

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>