Html CSS内联块在滑块列表中不起作用

我正试图让下面显示的两个img元素以内联方式显示，这样它们就可以随着滑块移动，但是它不会。我不确定是我遗漏了一些小的东西，还是有更大的力量在起作用

HTML:

下面是一个JSFIDLE，显示了所有滑块div及其各自的css类：

编辑：

我觉得需要对JSFIDLE进行更多的解释。您可以看到，每个彩色div都是单个滑块的视口，因此它们具有固定宽度。每一个都附有“溢出：隐藏”，以确保它们内部的元素看不见，并将滑入视图

---

我正在尝试使div.slider-box>ul>li元素在视口div.slider-small-box后面的行内块中不可见地显示。

您的.slider-small-box元素似乎没有足够的宽度来显示这两个图像。目前它需要至少有540像素的宽度

.slider-small-box {
  /* was: width: 270px */
  width: 540px;
  height: 200px;
  background-color: #eeeeee;
  display: inline-block;
  bottom: 0px;
  right: 0px;
  font-size: 0px;
  line-height: 0px;
  float: left;
  overflow: hidden;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.75);
  border-radius: 5px;
}

---

这是您更新的提琴：

事实上，

内联块就是这样工作的，如果容器的宽度没有足够的空间，它将跳转到下一行。因此，要将列表项强制放在一行上，您必须像这样使用
空白
：

.slider-box ul {
    padding: 0px;
    margin: 0px;
    white-space:nowrap;
}

我不确定我是否理解你的意思，但是
.slider小框
有一个固定的
宽度
。如果删除该选项，第二个
img
将与第一个对齐。div.slider-small-box具有固定的270px宽度的原因是它是滑块的视口，与宽度为550px的div.slider-large-box一样。谢谢您的快速回复，wiherek。div.slider-small-box具有固定的270px宽度的原因是它是滑块的视口。关于完整的JSFIDLE，我应该在问题中更好地解释我自己。谢谢你的回答，金。工作起来很有魅力！我以前从未听说过“内联块”或“空白”，你每天都能学到新东西@马兰德：不客气，是的，空白在某些情况下非常有用：）当然是的。是时候让我打开并完成这个滑块了！
.slider-small-box {
  /* was: width: 270px */
  width: 540px;
  height: 200px;
  background-color: #eeeeee;
  display: inline-block;
  bottom: 0px;
  right: 0px;
  font-size: 0px;
  line-height: 0px;
  float: left;
  overflow: hidden;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.75);
  border-radius: 5px;
}

.slider-box ul {
    padding: 0px;
    margin: 0px;
    white-space:nowrap;
}