Javascript 如何使列表项溢出在6个列表项之后水平滚动？

我一直试图使这些列表项水平滚动，但失败了。请有人帮助我使这些列表项滚动

我需要在这里保留6个项目&6个项目之后，任何数量的列表项目都将水平滚动。我试图通过谷歌找到解决方案，但无法解决我的问题。所以请帮我解决这个问题

.level ul{
填充顶部：20px；
位置：相对位置；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
李级{
浮动：左；文本对齐：居中；
列表样式类型：无；
位置：相对位置；
填充：20px 5px 0 5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
.level li:：之前，.level li:：之后{
内容：''；
位置：绝对；顶部：0；右侧：50%；
边框顶部：5px实心#84c225；
宽度：50%；高度：20px；
}
.李级：：之后{
右：自动；左：50%；
左边框：5px实心#84c225；
}
.level li:独生子女：：之后，.level li:独生子女：：之前{
显示：无；
}
.level li:唯一子项{padding top:0；}
.level li:第一个子项：：之前，.level li:最后一个子项：：之后{
边界：0无；
}
.level li:最后一个子项：：之前{
右边框：5px实心#84c225；
边界半径：0 5px 0 0；
-webkit边界半径：0 5px 0；
-moz边界半径：0 5px 0；
}
.level li:第一个孩子：：之后{
边界半径：5px0；
-webkit边界半径：5px 0；
-moz边界半径：5px 0；
}
.级别ul：：之前{
内容：''；
位置：绝对；顶部：0；左侧：50%；
左边框：5px实心#84c225；
宽度：0；高度：20px；
}
.李级分区{
边框：1px实心#ccc；
填充物：5px10px；
文字装饰：无；
颜色：#666；
字体系列：arial、verdana、tahoma；
字体大小：11px；
显示：内联块；
边界半径：5px；
-webkit边界半径：5px；
-moz边界半径：5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
.level li div:悬停，.level li div:悬停+ul li div{
背景：#c8e4f8；颜色：#000；边框：1px实心#94a0b4；
}
.level li div:悬停+ul li：：之后，
.level li div:悬停+ul li：：之前，
.level li div:hover+ul:：before，
.level li div:悬停+ul:：之前{
边框颜色：#94a0b4；
}
.主img{
宽度：150px；
}
.副img{
宽度：50px；
}

将

显示：flex

添加到

.level ul

（flex容器默认为非包装）-请参见下面的演示：

.level ul{
显示器：flex；
/*增加*/
填充顶部：20px；
位置：相对位置；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
李级{
浮动：左；
文本对齐：居中；
列表样式类型：无；
位置：相对位置；
填充：20px 5px 0 5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
李：以前，
.李级：：之后{
内容：''；
位置：绝对位置；
排名：0；
右：50%；
边框顶部：5px实心#84c225；
宽度：50%；
高度：20px；
}
.李级：：之后{
右：自动；
左：50%；
左边框：5px实心#84c225；
}
.level li:独生子女：：之后，
.level li:独生子女：：之前{
显示：无；
}
.李级：独生子女{
填充顶部：0；
}
.level li:第一个孩子：：之前，
.level li:最后一个子项：：之后{
边界：0无；
}
.level li:最后一个子项：：之前{
右边框：5px实心#84c225；
边界半径：0 5px 0 0；
-webkit边界半径：0 5px 0；
-moz边界半径：0 5px 0；
}
.level li:第一个孩子：：之后{
边界半径：5px0；
-webkit边界半径：5px 0；
-moz边界半径：5px 0；
}
.级别ul：：之前{
内容：''；
位置：绝对位置；
排名：0；
左：50%；
左边框：5px实心#84c225；
宽度：0；
高度：20px；
}
.李级分区{
边框：1px实心#ccc；
填充物：5px10px；
文字装饰：无；
颜色：#666；
字体系列：arial、verdana、tahoma；
字体大小：11px；
显示：内联块；
边界半径：5px；
-webkit边界半径：5px；
-moz边界半径：5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
.李层分区：悬停，
.level li div：悬停+ul li div{
背景：c8e4f8；
颜色：#000；
边框：1px实心#94a0b4；
}
.level li div:悬停+ul li：：之后，
.level li div:悬停+ul li：：之前，
.level li div:hover+ul:：before，
.level li div:悬停+ul:：之前{
边框颜色：#94a0b4；
}
.主img{
宽度：150px；
}
.副img{
宽度：50px；
}

感谢您的帮助，我在代码中添加了此选项，但这会使我的列表项变小。在上面的代码段中添加了一些占位符图像。。。您在

子img

元素上有

宽度：50px

，这可能就是问题所在？