为什么我的列表项没有显示内联块？

Question

我正在尝试基于<ul>创建图像滑块。 问题是<li>未显示inline-block。

我已经尝试过了：

.slider ul li {
  display: inline;
  float: left;
  white-space: nowrap;
}

但这并不奏效。我也试过了display:inline-flex;但没有结果 我尝试的另一件事是将<li>替换为<div>但是没有任何结果。

Jsfiddle

我通常工作，所以我不知道为什么这次没有工作。

那么有人可以帮我解决这个问题吗？

Answer 1

您需要将white-space: nowrap添加到父元素;在这种情况下，ul。

此外，white-space属性不会对浮动元素产生影响，因此您需要删除float: left。

Updated Example

.slider ul {
    white-space: nowrap;
}
.slider ul li {
    display: inline-block;
}