css - 如何使 `li` 元素的树彼此正确靠近

Question

对于动态生成的文件树，我将宽度设置为 360px 并在 x 上滚动。我知道，语法不正确，(嵌套的 ul 应该在 li 中)但我仍然想知道为什么下面代码中的 hhhhh 是不在 |- 的右侧，而是在其下方。和 iiiii 以及进一步...

.tree {
  width: 360px;
  overflow-x: scroll;
}

.li-tree {
  list-style: none;
}

<div class="tree">
  <ul class="ul-tree">
    <li class="li-tree">|-<span>aaaaa</span></li>
    <ul class="ul-tree">
      <li class="li-tree">|-<span>bbbbb</span></li>
      <ul class="ul-tree">
        <li class="li-tree">|-<span>ccccc</span></li>
        <ul class="ul-tree">
          <li class="li-tree">|-<span>ddddd</span></li>
          <ul class="ul-tree">
            <li class="li-tree">|-<span>eeeee</span></li>
            <ul class="ul-tree">
              <li class="li-tree">|-<span>fffff</span></li>
              <ul class="ul-tree">
                <li class="li-tree">|-<span>ggggg</span></li>
                <ul class="ul-tree">
                  <li class="li-tree">|-<span>hhhhh</span></li>
                  <ul class="ul-tree">
                    <li class="li-tree">|<span>iiiii</span></li>
                  </ul>
                </ul>
              </ul>
            </ul>
          </ul>
        </ul>
      </ul>
    </ul>
  </ul>
</div>

你可以在 fiddle 中看到 hhhhh 不再是 |- 的右边，而是在它下面:https://jsfiddle.net/a9fudsb6/5/

Answer 1

由于您的宽度，您的树没有空间。如果你改变它，例如到

width = 400;

它出现在里面。

如果要保持宽度，请添加以下内容:

.tree {
  width: 360px;
  overflow-x: scroll;
  white-space:nowrap;   // that one here
}