Javascript 在ul/li中树视图之前对齐项目

我有以下代码示例：

<ul>
    <li>group 1
    <ul>
    <li>group 1.1</li>
    <li> group 1.2</li>
    <li>group 1.3
    <ul> 
    <li>group 1.3.1</li>
    <li> group 1.3.2</li>
 </ul>
</li>
</ul>
</li>
    <li>group 2</li>
    <li>group 3</li> 
</ul>

第一组

第1.1组
第1.2组
第1.3组

第1.3.1组
第1.3.2组




第2组
第3组

我想在此树视图之前添加一些格式化的数字，所有这些数字在左侧垂直对齐，以便输出类似于：

10第1组

20第1.1组
15第1.2组
071.3组

100第1.3.1组
08第1.3.2组




第2组
110第3组

我试着在左边加上，然后把那些数字对齐，但是 这是行不通的

有什么建议吗？

---

谢谢

以下是使用CSS的解决方案。如果这对你有帮助，请告诉我

。顶级列表{
位置：相对位置；
左侧填充：80px；
}
李：第一个孩子{
位置：绝对位置；
左：0px；
}

1000.1组

20.1.1组
15.1.2组
07.1.2组
102220.1.3组

083113.1组1.3.1
17.1.3.2组


90189.2组
110.3组

您的代码看起来像示例输出。。。 你有什么问题？点的外观？-这是在css中完成的

li {
liststyle: disc, circle,......;
}

---

很抱歉事先理解错误。

这是无效的HTML，您只能在

中使用
。您必须使用
使用嵌套列表。HTML是正确的。请在浏览器中试用并查看结果。@JDEC
ul
s不能是其他
ul
s的直接子级。浏览器将修复您的错误，但这并不意味着它不是错误，请尝试并亲自查看。@JDEC。嵌入的
ul
结构应位于父
ul
标记的
li
标记内。我编辑并更正了代码。谢谢，如果你能很清楚地重新打开这个问题，OP需要一列左对齐的数字，这些数字在逐行的基础上与层次结构列表相匹配。可能会建议，如果您不理解该问题，请在对该问题的直接评论中要求澄清，而不是在人们期望的解决方案中要求澄清。我的观点是，您没有提供答案，这正是您使用答案框时所期望的。这有助于人们快速获得答案，因为他们不必阅读与自己无关的内容。对问题的直接评论清楚地针对原始海报（OP），而不会打断那些想要答案的人。我不想在这里做分析，但我要指出为什么这个网站使用这种格式，以帮助你更好地使用它。这是正确的。要使
位置：绝对
工作，根级别
ul
需要有
ul.root{position:relative；left:20px}
的css，其中
root
是根
ul
的
类
属性，因此它成为位置参考点。
左侧：
设置为树留出足够的空间容纳最大的数字。请向任何人提供这样做的原因，否则我们都无法学习如何提供更好的答案。
.top-level list
类还需要
position:relative
为所有
li span
标记提供明确的参考点。当事情不完整时，浏览器可能会进行最佳猜测渲染，这将适用于简单的结构。但是，如果root
ul
标记位于另一个结构中，并且应用了位置为
position:relative
的标记，那么所有的
li span
标记都会使用它，这可能真的会把布局搞得一团糟。@Patanjali，Tanmay Verma:聪明的家伙，你是最棒的！！你给出答案的速度之快令人难以置信：）非常感谢@Patanjali，非常感谢。JDEC欢迎您：）
li {
liststyle: disc, circle,......;
}