使用value of li的自定义十进制数的HTML列表

Question

我需要像这样显示一个列表:

1.      something ......
aligned like this
1.1.    next something
1.1.1.  next
2.      something
3.      next something

如上所示，我想列出带有自定义编号(来自php代码)和正确对齐的项目

这是我尝试过的

<ol>
<li value="1">something<br/>aligned like this</li>
<li value="1.1">next something</li>
<li value="1.1.1">next</li>
<li value="2">something</li>
<li value="3">next something</li>
</ol>

但是我得到的不是只有整数，没有小数点。有人能解决这个问题吗?

Answer 1

简单地使用attr()和content和表格布局来对齐

ol {
list-style: none;
}
li {
display: table-row;
}
li:before {
content: attr(value)".";
display: table-cell;
padding-right: 5px;
}

<ol>
<li value="1">something<br/>aligned like this</li>
<li value="1.1">next something</li>
<li value="1.1.1">next</li>
<li value="2">something</li>
<li value="3">next something</li>
</ol>