Css 如何防止元素跳转到div中的新行？

如何防止元素跳转到div中的新行？我对div应用了css no wrap和inline块，但当移动小屏幕大小不够宽时，仍然无法阻止元素跳转到新行

当我将div宽度限制为200px时，请参见演示中的“lala stich”跳转到新行：

使用这些样式

ul {
  display: flex;
}
.tree {
  overflow: auto;
}

*{
保证金：0；
填充：0；
}
树胶{
填充顶部：20px；
位置：相对位置；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
李先生{
文本对齐：居中；
列表样式类型：无；
位置：相对位置；
填充：20px 5px 0 5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
/*我们将使用：：before和：：after来绘制连接器*/
李树：以前，
李树：之后{
内容：''；
位置：绝对位置；
排名：0；
右：50%；
边框顶部：1件纯黑；
宽度：50%；
高度：20px；
}
李树：之后{
右：自动；
左：50%；
左边框：1px纯黑；
}
/*我们需要移除元素中的左右连接器，而不需要
有兄弟姐妹吗*/
李树：独生子：：之后，
李树：独生子：：以前{
显示：无；
}
/*删除单个子对象顶部的空间*/
李树：独生子女{
填充顶部：0；
}
/*从第一个子系统上拆下左侧接头并拆下
上一个子节点的右连接器*/
李树：第一个孩子：：之前，
李树：最后一个孩子：：之后{
边界：0无；
}
/*将垂直连接件添加回最后一个节点*/
李树：最后一个孩子：：之前{
右边框：1px纯黑；
边界半径：0 5px 0 0；
-webkit边界半径：0 5px 0；
-moz边界半径：0 5px 0；
}
李树：第一个孩子：：之后{
边界半径：5px0；
-webkit边界半径：5px 0；
-moz边界半径：5px 0；
}
/*从父级添加向下连接器的时间到了*/
.树ul：：以前{
内容：''；
位置：绝对位置；
排名：0；
左：50%；
左边框：1px纯黑；
宽度：0；
高度：20px；
}
李树先生{
边框：1px纯黑；
填充物：5px10px；
文字装饰：无；
颜色：黑色；
字体系列：arial、verdana、tahoma；
字号：18px；
显示：内联块；
边界半径：5px；
-webkit边界半径：5px；
-moz边界半径：5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
/*是时候使用一些悬停效果了*/
/*我们还将把悬停效果应用于元素的沿袭*/
李树答：悬停，
.树李a：悬停+ul李a{
背景：c8e4f8；
颜色：#000；
边框：1px实心#94a0b4；
}
/*悬停时的连接器样式*/
.树李a:悬停+ul李：：之后，
.树李a:悬停+ul李：：之前，
.树李a:悬停+ul：：之前，
.树李a:悬停+ul:：之前{
边框颜色：#94a0b4；
}
保险商实验室{
显示器：flex；
}
.树{
溢出：自动；
}

演示


阿里巴巴


米歇尔


杰森


洪英杰


比尔盖特





拉拉·斯蒂奇

内联块在哪里？一切都是浮动的我认为你至少应该删除所有的浮动属性，因为你引入了flex。。。这样保存代码会造成混乱。你是对的。我没有清理整个代码。现在不在我的电脑上。当我回来时将更新。它在桌面计算机上工作，但在viewpot mobile view上不工作。我试图消除浮动：左侧，但仍然存在问题。移动电话浏览器上的viewpot有什么解决方案吗？所以您添加了一个草稿答案，然后稍后将对其进行编辑。。。我认为这不是一个好主意…@zac1987您希望在宽度较小的移动设备上实现相同的行为。你增加了宽度200px只是为了模拟小屏幕？

ul {
  display: flex;
}
.tree {
  overflow: auto;
}