html - 内联 block 不适用于 li 内的图像

Question

我在每个 li 标签中都有图像。我试图在开始时只显示一张图片。所以我试图通过将 overflow: hidden 给父级来隐藏剩余的部分。但是 inline-block 不适用于 li 元素。

HTML

<div class="container">
  <div class="carousel">
    <ul>
      <li><img src="https://dummyimage.com/280X450/ccc/fff.png&text=Test1" /></li>
      <li><img src="https://dummyimage.com/280X450/fcb/fff.png&text=Test2" /></li>
      <li><img src="https://dummyimage.com/280X450/333/fff.png&text=Test3" /></li>
      <li><img src="https://dummyimage.com/280X450/cfb/fff.png&text=Test4" /></li>
      <li><img src="https://dummyimage.com/280X450/ccd/fff.png&text=Test5" /></li>
    </ul>
  </div>
</div>

CSS

body {
  background: #3bc;
}
.container {
  overflow: hidden;
}
.carousel {
  width: 300px;
  overflow: hidden;
}
ul li {
  display: inline-block;
  float: left;
  vertical-align: top;
  white-space: normal;
}

Codepen

Answer 1

你不能同时拥有 inline-block 和 float: left。 显示 是正确的。您需要做的就是添加 white-space: nowrap 并去掉 float:

body {
  background: #3bc;
}
.container {
  overflow: hidden;
}
.carousel {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;     /* Add this and remove float. */
}
ul li {
  display: inline-block;
  vertical-align: top;
  white-space: normal;
}

<div class="container">
  <div class="carousel">
    <ul>
      <li><img src="https://dummyimage.com/280X450/ccc/fff.png&text=Test1" /></li>
      <li><img src="https://dummyimage.com/280X450/fcb/fff.png&text=Test2" /></li>
      <li><img src="https://dummyimage.com/280X450/333/fff.png&text=Test3" /></li>
      <li><img src="https://dummyimage.com/280X450/cfb/fff.png&text=Test4" /></li>
      <li><img src="https://dummyimage.com/280X450/ccd/fff.png&text=Test5" /></li>
    </ul>
  </div>
</div>

由于缺乏支持和新技术，我没有使用 Flexbox。