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

＆＃13;

body {
  background: #3bc;
}

.container {
  overflow: hidden;
}

.carousel {
  width: 300px;
  overflow: hidden;
}

ul {
  display: flex;
  list-style: none;
}

＆＃13;

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

＆＃13;

内联块无法处理li

2 个答案: