在 ul / li 中对齐 treeview 之前的项目

Question

我有这个代码示例：

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

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

<ul>
    <li><span style="margin-left:-30px">10</span>group 1
    <ul>
    <li><span style="margin-left:-30px">20</span>group 1.1</li>
    <li><span style="margin-left:-30px">15</span> group 1.2</li>
    <li><span style="margin-left:-30px">07</span>group 1.3
    <ul> 
    <li><span style="margin-left:-30px">100</span>group 1.3.1</li>
    <li><span style="margin-left:-30px">08</span> group 1.3.2</li>
 </ul>
</li>
</ul>
</li>
    <li><span style="margin-left:-30px">90</span>group 2</li>
    <li><span style="margin-left:-30px">110</span>group 3</li>
    
</ul>

我尝试在左侧添加并对齐其中的数字，但这不起作用。

有什么建议吗？

谢谢

Answer 1

这是使用 CSS 的解决方案。 让我知道这是否对您有帮助。

 .top-level-list { position: relative; padding-left: 80px; } li>span:first-child { position: absolute; left: 0px; }

 <html> <body> <ul class="top-level-list"> <li><span>1000.</span>group 1</li> <ul> <li><span>20.</span>group 1.1</li> <li><span>15.</span>group 1.2</li> <li><span>07.</span>group 1.2</li> <li><span>102220.</span>group 1.3</li> <ul> <li><span>083113.</span>group 1.3.1</li> <li><span>17.</span>group 1.3.2</li> </ul> </ul> <li><span>90189.</span>group 2</li> <li><span>110.</span>group 3</li> </ul> </body> </hmtl>

Answer 2

您的代码看起来像您的示例 output ...您的问题是什么？ 要点的外观？- 这是在 css 中完成的。

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

很抱歉提前造成误解。

在 ul / li 中对齐 treeview 之前的项目

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-05-07 07:57:05

解决方案2
-4 2020-05-07 08:01:13

在 ul / li 中对齐 treeview 之前的项目

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-05-07 07:57:05

解决方案2 -4 2020-05-07 08:01:13

解决方案1
2 已采纳 2020-05-07 07:57:05

解决方案2
-4 2020-05-07 08:01:13