我在每个 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;
}
最佳答案
你不能同时拥有 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。
关于html - 内联 block 不适用于 li 内的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45188834/