Inline-block 无法处理 li 中的图像

Question

我在每个 li 标签中都有图像。我试图在开始时只显示一张图片。所以我试图通过将 overflow: hidden 赋给 parent 来隐藏剩余部分。但是 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。 display 是对的。您需要做的就是添加 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。

Answer 2

float:left 将 li 元素从文档流中移除。在下面的代码中，我删除了 float 并改用 flexbox。

body {
  background: #3bc;
}

.container {
  overflow: hidden;
}

.carousel {
  width: 300px;
  overflow: hidden;
}

ul {
  display: flex;
  list-style: none;
}

<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>

Inline-block 无法处理 li 中的图像

Inline-block not working with images inside li

html

css

overflow

html-lists