Html 在带有溢出的div中沿x轴滚动

我想把许多

子div

放在

父div

中。父对象具有固定的宽度。孩子们在左边漂浮，会被淹没

应该可以在x轴上滚动

但在尝试这样做时，孩子们会进入下一行，并且不会在x方向溢出

我写了一个小例子，也许我是瞎子

试试这个：

.parent{
位置：相对位置；
/*宽度：80%*/
高度：300px；
左：20%；
最高：50%；
转化：translateY（-50%）；
框大小：边框框；
填充：30px；
/*溢出-x：滚动*/
溢出：滚动；
背景:#f5；
溢出y：滚动；
/*浮动：左*/
溢出-x：滚动；
}
.孩子{
宽度：200px；
身高：100%；
右边距：30px；
填充：25px；
框大小：边框框；
背景：#3b3b；
/*浮动：无*/
显示：-webkit内联框；
/*垂直对齐：底部对齐*/
}

试试这个：

.parent{
位置：相对位置；
/*宽度：80%*/
高度：300px；
左：20%；
最高：50%；
转化：translateY（-50%）；
框大小：边框框；
填充：30px；
/*溢出-x：滚动*/
溢出：滚动；
背景:#f5；
溢出y：滚动；
/*浮动：左*/
溢出-x：滚动；
}
.孩子{
宽度：200px；
身高：100%；
右边距：30px；
填充：25px；
框大小：边框框；
背景：#3b3b；
/*浮动：无*/
显示：-webkit内联框；
/*垂直对齐：底部对齐*/
}

这可以通过在父div上添加空格：nowrap来实现，然后删除浮点：left并向子div添加显示：内联块

html，正文{
宽度：100%；高度：100%；
字体系列：“蒙特塞拉特”，无衬线；
颜色：#fff；
文本转换：大写；
}
.家长{
位置：绝对位置；
宽度：80%；高度：300px；
左：20%；顶：50%；
转化：translateY（-50%）；
框大小：边框框；
填充：30px；
溢出-x：滚动；
背景:#f5；
空白：nowrap；
}
.孩子{
宽度：200px；高度：100%；
右边距：30px；
填充：25px；
框大小：边框框；
背景：#3b3b；
显示：内联块；
}

儿童#1
儿童#2
儿童#3
儿童4岁
儿童5岁
儿童#6
儿童7岁

这可以通过在父div上添加空格：nowrap来实现，然后删除浮点：left并向子div添加显示：内联块

html，正文{
宽度：100%；高度：100%；
字体系列：“蒙特塞拉特”，无衬线；
颜色：#fff；
文本转换：大写；
}
.家长{
位置：绝对位置；
宽度：80%；高度：300px；
左：20%；顶：50%；
转化：translateY（-50%）；
框大小：边框框；
填充：30px；
溢出-x：滚动；
背景:#f5；
空白：nowrap；
}
.孩子{
宽度：200px；高度：100%；
右边距：30px；
填充：25px；
框大小：边框框；
背景：#3b3b；
显示：内联块；
}

儿童#1
儿童#2
儿童#3
儿童4岁
儿童5岁
儿童#6
儿童7岁

试试这个

.parent{
位置：绝对位置；
宽度：80%；高度：300px；
左：20%；顶：50%；
转化：translateY（-50%）；
框大小：边框框；
填充：30px；
空白：nowrap；
溢出-x：滚动；
背景:#f5；
}
.孩子{
宽度：200px；高度：100%；
右边距：30px；
填充：25px；
框大小：边框框；
背景：#3b3b；
显示：内联块；
}

儿童#1
儿童#2
儿童#3
儿童4岁
儿童5岁

试试这个

.parent{
位置：绝对位置；
宽度：80%；高度：300px；
左：20%；顶：50%；
转化：translateY（-50%）；
框大小：边框框；
填充：30px；
空白：nowrap；
溢出-x：滚动；
背景:#f5；
}
.孩子{
宽度：200px；高度：100%；
右边距：30px；
填充：25px；
框大小：边框框；
背景：#3b3b；
显示：内联块；
}

儿童#1
儿童#2
儿童#3
儿童4岁
儿童5岁

删除子div的浮动。并添加overflow-x：滚动到parentdiv！拆下儿童div的浮动。并添加overflow-x：滚动到parentdiv！谢谢如何在x轴上隐藏scrolbar？是否希望在水平滚动时不显示滚动条？@Malte您可以在x轴上隐藏滚动条以添加以下内容：溢出-x:隐藏；谢谢如何在x轴上隐藏scrolbar？是否希望在水平滚动时不显示滚动条？@Malte您可以在x轴上隐藏滚动条以添加以下内容：溢出-x:隐藏；