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>