틀:트리 다이어그램/vertical.css

.vertical-tree .root {
	width:max-content !important;
}

.vertical-tree li {
    width: max-content;
    position: relative;
}

.vertical-tree li > div:first-child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.vertical-tree span {
	float: left;
	border-radius: 0.25rem;
	padding: 0.3rem 0.7rem;
	margin: 0.3rem 0.7rem 0.3rem 0.8em;
	top: calc(50% - 1.5rem);
	position: relative;
}

.vertical-tree span > div:first-child {
	left: -0.8rem;
	position: absolute;
	width: 0.7rem;
	top: 50%;
}

.vertical-tree ul {
    /* border: 1px solid; */
    padding: 0;
    display: grid;
    list-style: none;
    position: relative;
	margin: 0 !important;
}

.vertical-tree ul > div:first-child {
	left: -0.7em;
	position: absolute;
	width: 0.7em;
	top: 50%;
}

.vertical-tree ul li:only-child > div:first-child {
    height: 0 !important;
}
.vertical-tree li:last-child > div:first-child {
    bottom: 50%;
}
.vertical-tree div:first-child + li > div:first-child {
    top: 50%;
}

.vertical-tree .root > div:first-child:first-child, 
.vertical-tree .root > li > span div:first-child:first-child, 
.vertical-tree .root > li > div:first-child:first-child {
    display: none;
}