Html 如何水平扩展CSS族树？

我用CSS创建了一个家谱

族树工作正常，但问题是如果一行中的列表太多，它会在行的右端打断该行，并在新行上显示该行

如何在不破坏子元素的情况下使此族树水平扩展？即使页面底部没有水平滚动条，我也只想按原样显示这棵树，而不需要将元素移动到新行中

代码如下：

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

在这种情况下，您可以通过将

显示：flex

添加到

.tree-ul

来使用css flexbox，这应该可以工作

display: flex;
padding-top: 20px;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;

---

另外，您似乎没有为父级

ul

定义

width

，将

width:100%

添加到

.tree-ul
overflow-y:scroll
应该有效谢谢@Dark\u-thunder。我将此添加到“.tree ul”和“.tree li”CSS中，但似乎不起作用。也许我做错了什么。我应该在其他地方应用“overflow-y:scroll”吗？谢谢