Html 防止多级水平断裂

我有以下使用LI创建树的代码
-问题：当树节点变大超过屏幕宽度时，li将断开到新行 对于所有树节点级别，因此我需要防止li中断并使页面滚动
这是我的代码：

[https://jsfiddle.net/naadydev/xq8a3ztz/2/][1] 

---

添加

空白：nowrap

到包含

ul

并将子项

li

s的显示更改为

内联块

演示

如果它们没有被分成几行，应该有一个水平滚动条，否则溢出的内容将被隐藏（用户无法使用）你尝试了溢出：自动？你已经描述了你不希望它做什么，但不是你期望它做什么。我希望页面滚动到我想要的位置，而liexpand@user179326不客气！很高兴能帮助你。
#list {
    white-space: nowrap;
}
.tree li {
    /* float: left; */ /* REMOVD */
    display: inline-block;
    /* rest of your styles */
}