как правильно сделать дерево элементов `li` рядом друг с другом - PullRequest
Новая
       31

как правильно сделать дерево элементов `li` рядом друг с другом

0 голосов
/ 16 мая 2019

Для файлового дерева, которое генерируется динамически, я установил ширину в 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>

В скрипке видно, что hhhhh больше не справа от |-, а под ним: https://jsfiddle.net/a9fudsb6/5/

1 Ответ

0 голосов
/ 16 мая 2019

Из-за вашей ширины нет места для вашего дерева.Если вы измените его, например, на 

width = 400;

, оно появится внутри.

Если вы хотите сохранить ширину, добавьте следующее: 

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