Html 我可以得到<；李>'；在不增加包含div的大小的情况下并排的？

我想做的事

因此，我有一个

，在这个

中是一个

填充了

，每个都包含一个

编辑：值得注意的是，我曾尝试将li的左侧浮动，但它们仍在下方，可能是因为它们不适合包含的div中。
将ul absolute定位在div中。然后将display:inline块添加到图像/列表中。添加位置：相对于div和溢出：隐藏

您可能需要稍微更改.幻灯片的宽度。您可以使用jquery以不同的方式对ul进行绝对定位并使其滑动

#slider{
    width:400px;
    height:400px;
    margin: 0 auto;
    border-style:solid;
    border-color:#000;
    border-width:1px;
}
.slides{
    list-style-type: none;
    padding:0px;
    margin:0px;
}
.slide{
    list-style-type: none;
}

.slide img{
    width:400px;
    height:400px;
}

编辑：更改宽度：…px为空白：nowrap；根据综管系统的建议

就用这个吗？然后，您可以在flexbox或其容器上使用
marginleft
（或
transform:translateX
偶数）使其滚动


#滑块>ul{
显示器：flex；
柔性流：行换行；
证明内容：中心；
列表样式：无；
}








您可以使用
空白：nowrap，以避免包装。设置
overflow:hidden
，以避免看到额外的元素

删除溢出属性以检查其对齐方式


#滑块{
宽度：400px；
高度：400px；
保证金：0自动；
边框样式：实心；
边框颜色：#000；
边框宽度：1px；
溢出：隐藏；/*避免其他元素可见*/
}
.幻灯片{
列表样式类型：无；
填充：0px；
边际：0px；
空白：nowrap；/*不换行到下一行*/
}
.幻灯片{
列表样式类型：无；
}
.幻灯片图像{
宽度：400px；
高度：400px；
}











您需要将
li
元素显示为块，并将其向左浮动，这样它们将水平列出

#slider{
   position:relative;
   overflow:hidden;
}
.slides{
    position:absolute;
    white-space: nowrap;
}
.slide,.slide img{
    display:inline-block;
}

完成后，您需要隐藏除第一个元素之外的其余
li
元素。（可以通过向第一个元素添加不同的类来实现）。
使用jquery，您可以在
li
元素之间切换该类，并添加一些动画。
您可以使用li{display:inline；}并排获得该类


您希望如何水平或垂直显示图像幻灯片？一次要显示多少图像？不能使用现有库吗？e、 例如，可能问题已经解决。如果将其替换为
空白：nowrap，则可以删除
幻灯片上的宽度声明。这样，如果将来添加更多幻灯片，就不必更改CSS。您还可能需要添加
行高：0
to
.slides
删除幻灯片底部的空白。
#slider{
   position:relative;
   overflow:hidden;
}
.slides{
    position:absolute;
    white-space: nowrap;
}
.slide,.slide img{
    display:inline-block;
}

#slider li{
  display:block;
  float: left
}

li{
     display: inline;
}