提问人:GDY 提问时间:7/30/2019 更新时间:8/1/2019 访问量:147
水平多维列表
Horizontal multidimensional list
问:
我有一个多维数组,它被呈现到同一层次结构中的 HTML 列表中:
<ul>
<li>
First A
<ul>
<li>
Second A (Child of First A)
<ul>
<li>
Third A (Child of Second A)
</li>
<li>
Third B (Child of Second A)
</li>
<li>
Third B (Child of Second A)
</li>
</ul>
</li>
<li>
Second B (Child of First A)
</li>
<li>
Second C (Child of First A)
</li>
</ul>
</li>
</ul>
我想在不改变层次结构的情况下像下面一样显示这个列表......有什么想法吗?
答:
0赞
Sumit Patel
7/30/2019
#1
这并不完全是你要问的,但这个例子可以用最小的努力完成,而不使用绝对位置。如果这有帮助,请告诉我。
使用和添加 .display flex
span
li{display: flex;}
<ul>
<li>
<span>First A</span>
<ul>
<li>
<span>Second A (Child of First A)</span>
<ul>
<li>
Third A (Child of Second A)
</li>
<li>
Third B (Child of Second A)
</li>
<li>
Third B (Child of Second A)
</li>
</ul>
</li>
<li style="margin-top:-35px;">
Second B (Child of First A)
</li>
<li>
Second C (Child of First A)
</li>
</ul>
</li>
</ul>
评论
0赞
GDY
7/30/2019
这正是我现在正在使用的,似乎是我迄今为止尝试过的所有解决方案中最好的......如何摆脱 2A 和 2B 之间的 GAB 的任何想法?
0赞
Sumit Patel
7/30/2019
我们可以添加 margin-top:-35px;到第二个 B(第一个 A 的子项)的 li,但不是最佳解决方案。
1赞
moritzgvt
8/1/2019
#2
有两种选择,如何以与当前解决方案不同的方式进行操作。
第一个:没有 JS,但有浮点数,所以你在 ULLI 构造的末尾需要一个。
(我不会使用这个,因为它部分不稳定,但我认为我应该发布它)clear: both
<style>
div {
float: left;
}
ul {
margin-left: 50px;
padding: 0;
float: right;
}
div > ul {
margin-left: 0;
}
span {
clear: both;
}
</style>
<div id="container">
<ul>
<li>
First A
<ul>
<li>
Second A (Child of First A)
<ul>
<li>
Third A (Child of Second A)
</li>
<li>
Third B (Child of Second A)
</li>
<li>
Third B (Child of Second A)
</li>
</ul>
</li>
<li>
Second B (Child of First A)
</li>
<li>
Second C (Child of First A)
</li>
</ul>
</li>
</ul>
<span></span>
</div>
或者第二个:
使用一个小脚本,提供容器的高度。
CSS系统:
div {
position: relative;
}
ul {
position: absolute;
top: 0;
width: 200px;
margin: 0 0 0 250px;
padding: 0;
}
div > ul {
margin-left: 0;
}
Javascript的:
let absHeight = 0;
let uls = document.getElementsByTagName('ul');
Array.from(uls).forEach(ul => {
absHeight = (absHeight < ul.offsetHeight) ? ul.offsetHeight : absHeight
});
document.getElementById('container').style.height = absHeight + 'px';
评论