列表样式类型的小数在实际内容之后

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计数器:

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

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

可能很难得到你想要的确切效果。

CSS3为列表标记提供了更多的选择，但目前浏览器的支持相当不稳定。

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;
});

Demo: 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来动态添加数字