在 HTML 中没有展开折叠的水平树视图

Question

我正在尝试在纯 HTML 中实现没有展开/折叠功能的水平树视图。 但我找不到任何。 帮我。

例子：

如果有任何图书馆，请告诉我。

Answer 1

请检查这个，这就是你所需要的..这里是codepen演示https://codepen.io/Vikaspatel/pen/Ybwqew

 ul{ margin:0; padding:0; list-style: none; position: relative; } .wrapper { max-width: 800px; width: 100%; height: 600px; background-color: #eeeeee; margin: 0 auto; padding: 10px; display: flex; align-items: center; } .wrapper li { width: 100px; text-align: center; position: relative; } .wrapper li::before { position: absolute; content: ""; width: 100px; height: 2px; background-color: #333333; left: 50%; transform: translateX(-50%); top: 15px; } .circle { height: 30px; width: 30px; display: block; background-color: #8cef46; border-radius: 50%; position: relative; margin: 0 auto; font-size: 12px; line-height: 30px; } .children { position: absolute; top: 50%; transform: translateY(-50%); left: 100%; height: 300px; display: flex; flex-direction: column; justify-content: space-between; } .children.first-child.top-child { height: 150px; } .children.first-child.bottom-child { height: 230px; } .children.second-child.bottom-child { height: 126px; } .children.second-child.top-child { height: 30px; } .children.third-child.top-child { height: 80px; } .children.first-child.bottom-child .children.second-child.top-child, .children.first-child.bottom-child .children.second-child.middle-child { height: 30px; } .children.first-child.bottom-child .children.second-child.bottom-child{ height:120px; } .children::before { position: absolute; content: ""; left: 0; width: 2px; background-color: #333333; top: 15px; bottom: 15px; } .wrapper .last-child li::before { width: 50px; left: 0; transform: translateX(0); } .red{ background-color: #D8A7C8; } .green{ background-color: #B0EE91; } .purple{ background-color: #8D9BF4; } .yellow{ background-color: #F8E2A9; } .brown{ background-color:#8D869A; }

 <div class="wrapper"> <ul class="parent"> <li> <span class="circle green">12</span> <ul class="children first-child"> <li> <span class="circle red">3</span> <ul class="children first-child top-child"> <li> <span class="circle brown">6</span> <ul class="children second-child top-child"> <li> <span class="circle">14</span> <ul class="children third-child top-child last-child"> <li> <span class="circle red">11</span> </li> <li> <span class="circle yellow">1</span> </li> </ul> </li> </ul> </li> <li> <span class="circle purple">13</span> <ul class="children second-child bottom-child last-child"> <li> <span class="circle red">2</span> </li> <li> <span class="circle green">5</span> </li> <li> <span class="circle purple">19</span> </li> </ul> </li> </ul> </li> <li> <span class="circle yellow">0</span> <ul class="children first-child bottom-child"> <li> <span class="circle red">9</span> <ul class="children second-child top-child last-child"> <li> <span class="circle">15</span> </li> </ul> </li> <li> <span class="circle">16</span> <ul class="children second-child middle-child last-child"> <li> <span class="circle purple">7</span> </li> </ul> </li> <li> <span class="circle purple">4</span> <ul class="children second-child bottom-child last-child"> <li> <span class="circle red">8</span> </li> <li> <span class="circle green">17</span> </li> <li> <span class="circle brown">20</span> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>

Answer 2

非常好！ 我喜欢它！ 只是一个问题：是否有一种方法可以从这样的文本文件开始自动创建ul li结构？

,,,,
12
,3,,,
,,6,,
,,,14,
,,,,11
,,,,1
,,,13,
,,,,2
,,,,5
,,,,19
,0,,,
,,9,,
,,,15,
,,16,,
,,,7,
,,4,,
,,,8,
,,,17,
,,,20,

其中第一行在水平深度处有许多逗号，另一行开始时对父级没有逗号，对于第一代，一个逗号，对于第二代，两个逗号等等。

Python，shell scritp，java或任何其他外部脚本从示例中格式化的文件开始生成html代码？