Question

这可能是不可能的，但我不得不问。让我们说我有一个清单：

<ul>
<li>hello world</li>
<li>hello world</li>
</ul>

如果我使用css：

.list {
list-style-type:decimal
}

它将呈现：

1. hello world
2. hello world

我可以将数字显示在li的实际内容之后，如果没有点，则更好，例如：

hello world 1
hello world 2

泰！

你有任何想法......如果CSS不可能使用jquery吗？

Answer 1

您可以使用:after和CSS counters：

ol {
    counter-reset: pancakes;
}
li {
    list-style-type: none;
}
li:after {
    content: counter(pancakes);
    counter-increment: pancakes;
}

演示：http://jsfiddle.net/ambiguous/DePqL/1/

可能很难获得你所追求的确切效果。

CSS3提供a lot more options for list markers但目前浏览器支持相当不稳定。

Answer 2

您可以使用css 生成的内容

执行此操作

.list {
    padding:2em;
    list-style-type:none;
    counter-reset:nums;    
}

.list li:after{
    counter-increment:nums;
    content: " " counter(nums);
}

示例：http://jsfiddle.net/Xrbm2/2/

Answer 3

我不知道CSS解决方案，但既然你提到了jquery，那么如下所示：

$('li').each(function(index) {
    $(this).append(" " + (index + 1));
});

遍历每个<li>并使用index（基于0）参数在内容后附加数字

Answer 4

试试这个，Html：

<ul id="theul">
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
</ul>

JS：

var i=1;
    $("#theul li").each(function() {
      $(this).append(" " + i);
        i = i+1;
});

演示：jsfiddle

Answer 5

您可能需要自己创建效果。这是一个例子。 http://jsfiddle.net/9NmYm/

ul {
   list-style: none;
}
ul li span.num {
    float: right;
}

<ul>
    <li>Hello World<span class="num">1</span></li>
    <li>Hello World<span class="num">2</span></li>
    <li>Hello World<span class="num">3</span></li>
</ul>

当然，如果你有一个很长的列表，你可以使用JavaScript或jQuery动态添加数字。

在li的实际内容之后列出样式类型decimal

5 个答案: