Html 为什么这些内联块div在其父级具有overflow-x:scroll的情况下仍在换行？

在这个SSCCE中，

.wrapper

，它是父对象，被赋予

溢出-x:scroll

。所有子DVIV都显示为

display:inline block

。我希望子div显示在一行中，第五行和第六行

.item

在I向右滚动之前不可见

但是，第五个和第六个

.item

换行到下一行问题是为什么，我该怎么办？

*{
边际：0px；
填充：0px；
边框：0px无；
背景：透明无重复滚动0%0%；
字体大小：100%；
垂直对齐：基线；
}
.包装纸{
溢出-x：滚动；
位置：相对位置；
}
分部项目{
/*位置：绝对位置*/
显示：内联块；
宽度：25%；
高度：25vw；
}
.小麦{
背景色：小麦；
}
.粉红{
背景颜色：粉红色；
}
.米色{
背景颜色：米色；
}
盖恩斯博罗先生{
背景色：gainsboro；
}
.珊瑚{
背景颜色：珊瑚；
}
克鲁森先生{
背景颜色：深红色；
}
.项目1{
左：0%；
}
.项目2{
左：25%；
}
.项目3{
左：50%；
}
.项目4{
左：75%；
}
.项目5{
左：100%；
}
.项目6{
左：125%；
}
.前面的箭头，
.下一支箭{
宽度：30px；
身高：50%；
最高：50%；
位置：绝对位置；
显示：块；
不透明度：0.7
}
.上一个箭头{
文本对齐：右对齐；
背景图片：url（a2.png）；
背景重复：无；
}
.前面的箭头，
.下一支箭{
不透明度：1；
}

a、 a.a.a.a.a.a。

通常，内联液位箱尽可能避免容器溢出。在

.wrapper

元素中有一系列内联块

.item

s。一旦

.wrapper

中的当前行上不再有下一个内联块的空间，就会发生换行，下一个内联块将换行到下一行，其余的项也会随之换行。请注意，即使没有元素间空白（您已经使用HTML注释确保了这一点），也会发生这种情况

容器上的

溢出

值不影响其内容是否溢出或何时溢出；它只会在发生溢出时更改它及其内容的呈现方式

因此，您必须强制内联块实际溢出容器。由于您处理的是一系列内联块，因此最简单的方法是在

.wrapper

上指定

空白：nowrap

，这将抑制所有换行机会，即使在内联块之间：

.wrapper{
溢出-x：滚动；
位置：相对位置；
空白：nowrap；
}

*{
边际：0px；
填充：0px；
边框：0px无；
背景：透明无重复滚动0%0%；
字体大小：100%；
垂直对齐：基线；
}
.包装纸{
溢出-x：滚动；
位置：相对位置；
空白：nowrap；
}
分部项目{
显示：内联块；
宽度：25%；
高度：25vw；
}
.小麦{
背景色：小麦；
}
.粉红{
背景颜色：粉红色；
}
.米色{
背景颜色：米色；
}
盖恩斯博罗先生{
背景色：gainsboro；
}
.珊瑚{
背景颜色：珊瑚；
}
克鲁森先生{
背景颜色：深红色；
}
.项目1{
左：0%；
}
.项目2{
左：25%；
}
.项目3{
左：50%；
}
.项目4{
左：75%；
}
.项目5{
左：100%；
}
.项目6{
左：125%；
}
.前面的箭头，
.下一支箭{
宽度：30px；
身高：50%；
最高：50%；
位置：绝对位置；
显示：块；
不透明度：0.7
}
.上一个箭头{
文本对齐：右对齐；
背景图片：url（a2.png）；
背景重复：无；
}
.前面的箭头，
.下一支箭{
不透明度：1；
}

a、 a.a.a.a.a.a。

您可以使用

*

通配符选择器，而不是为第一个选择器编写每个元素。@TylerH谢谢。（现在这让我觉得自己很笨）