水平多维列表

Horizontal multidimensional list

提问人:GDY 提问时间:7/30/2019 更新时间:8/1/2019 访问量:147

问:

我有一个多维数组,它被呈现到同一层次结构中的 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>

我想在不改变层次结构的情况下像下面一样显示这个列表......有什么想法吗?

enter image description here

CSS 多维数组 html-lists 嵌套列表

评论

0赞 ScottieG 7/30/2019
你能提供一些CSS来展示你已经尝试过的东西吗?

答:

0赞 Sumit Patel 7/30/2019 #1

这并不完全是你要问的,但这个例子可以用最小的努力完成,而不使用绝对位置。如果这有帮助,请告诉我。

使用和添加 .display flexspan

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