Html 容器中的内联div总是将最后一个放入WebKit中的第二行

在尝试手工制作滑块时，我注意到，在Webkit/Blink Chrome桌面和Android stock browser中，无论容器中有多少幻灯片，CSS下的最后一张幻灯片都会被推到下一行：

//动态地插入场景 //因此不会出现空白和/或换行 []forEach.calldocument.querySelectorAlldiv.container，functioncontainer{ var场景； //孩子的数量无关紧要 var all=数学地板随机*15+1； forvar i=0；i div.scene { 宽度：100%； 高度：50px； 背景图像：右下角线性渐变，FFF，000； 显示：内联块； 垂直对齐：顶部； 字体大小：20px； 颜色：蓝色； } 更新

可以尝试在.container中使用空格：nowrap；来禁止文本换行和换行，而不是使用空格：pre；pre保留新行。在此处阅读有关空格属性的更多信息：

---

注意：没有明确的解释为什么这样做。只是Chrome似乎出于某种原因在环绕div。可能是Chrome/webkit中的一个bug。

您可能需要重置一些UA样式。@maioman如果我最初的问题没有明确说明：高度：50px是我想要的，我想知道我应该看哪种UA样式我无法事先知道，因为它们通常是图像，这里的宽度：50px只是为了演示溢出效果，在现实生活中，它将是宽度：100%，因此我无法硬编码宽度：50px到.scene。但是感谢您的努力，float是一个很好的点。也许可以尝试空白：nowrap；in.container来抑制文本换行和换行，而不是of空白：pre；pre保留新行。阅读更多有关空白属性的信息：此处没有换行符：。场景是由JS故意添加的，因此它们之间没有换行符和空白。我尝试了空白：nowrap to.container，行为得到了惊人的纠正。你能解释为什么吗？不，我不能。但我注意到你有d.scene divs上的isplay属性设置为inline block，这使它们像文本一样流动，而Chrome似乎出于某种原因正在包装divs。这可能只是那些奇怪的浏览器行为之一。很高兴我能提供帮助：