Css 想要将图像并排放置在容器中，但无法摆脱换行

我试图将图像容器放在另一个容器中，最终它将是多个在一行中，因为现在我有四个

我的问题是，我最终想把它们像传送带一样在屏幕上移动，而它们仍然在鼠标上移动

因此，重要的是，由于屏幕结束而被隐藏的部分将被切掉，并且不会离开行。我不明白为什么即使有了nowrap，他们也总是换到另一排

如果有人有一个简单的技巧来制作传送带，我也会心存感激。我的javascript也不起作用

<style>
#container {
background: transparent;
position: relative;
overflow:hidden;
white-space: nowrap;
width: 100%;
margin: 0px auto;
height: 450px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

#容器{
背景：透明；
位置：相对位置；
溢出：隐藏；
空白：nowrap；
宽度：100%；
保证金：0px自动；
高度：450px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；

}

#foto1{
高度：450px；
显示：内联；
垂直对齐：顶部；
浮动：无；
空白：nowrap；
内容：url（“images/ruecken.jpg”）；
}
#foto1:hover{content:url（“images/image-2.jpg”）；
}
#foto1:active{content:url（“images/image-3.jpg”）；
}
#foto2{
高度：450px；
显示：内联；
垂直对齐：顶部；
浮动：无；
空白：nowrap；
内容：url（“images/Ruecken.jpg”）；
}
#foto2:hover{content:url（“images/image-3.jpg”）；
}
#foto2:active{content:url（“images/image-4.jpg”）；
}
#foto3{
高度：450px；
显示：内联；
垂直对齐：顶部；
浮动：无；
空白：nowrap；
内容：url（“images/Ruecken.jpg”）；
}
#foto3:hover{content:url（“images/image-5.jpg”）；
}
#foto3:active{content:url（“images/image-6.jpg”）；
}
#foto4{
高度：450px；
显示：内联；
垂直对齐：顶部；
浮动：无；
空白：nowrap；
内容：url（“images/ruecken.jpg”）；
}
#foto4:hover{content:url（“images/image-4.jpg”）；
}
#foto4:active{content:url（“images/image-5.jpg”）；
}

寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的格式。请看这是一个错误的css代码，使用类而不是ID。例如，您可以创建一个名为.image的类并为其指定样式，而无需重复自己的操作。对于问题本身，您可以在容器上使用flex属性Hanks Fadifannoun！！它起作用了！我试过使用这些类，但是我很难在悬停等等上分配不同的图像。。？！

#foto1 {
height: 450px;

display: inline;
vertical-align: top;
float: none;
white-space: nowrap;
content: url("images/ruecken.jpg");
}
#foto1:hover { content: url("images/image-2.jpg");
}
#foto1:active { content: url("images/image-3.jpg");
}

#foto2 {
height: 450px;

 display: inline;
vertical-align: top;
float: none;
white-space: nowrap;
content:url("images/Ruecken.jpg");
}
#foto2:hover { content: url("images/image-3.jpg");
}
#foto2:active { content: url("images/image-4.jpg");
}

#foto3 {
height: 450px;

display: inline;
vertical-align: top;
float: none;
white-space: nowrap;
content:url("images/Ruecken.jpg");
}
#foto3:hover { content: url("images/image-5.jpg");
}
#foto3:active { content: url("images/image-6.jpg");
}

#foto4 {
height: 450px;

display: inline;
vertical-align: top;
float: none;
white-space: nowrap;
content:url("images/ruecken.jpg");
}
#foto4:hover { content: url("images/image-4.jpg");
}
#foto4:active { content: url("images/image-5.jpg");
}

</style>