使用 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>