css - 横向多维列表

Question

我有一个多维数组，它在同一层次结构中呈现为 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>

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

Answer 1

有两种选择，您可以如何以不同于当前解决方案的方式进行处理。

第一个:没有 JS 但有 float ，因此您需要在 ULLI 构造的末尾添加一个 clear: both。
(我不会使用这个，因为它部分不稳定，但我认为我应该发布它)

See the Pen

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