overflow:hidden 隐藏网页上的所有内容

Question

我正在尝试在网页中创建一个滑块，但 overflow:hidden 隐藏了所有内容，而不是只隐藏屏幕显示的内容。我需要对齐图像并隐藏屏幕上出现的所有内容。我的 fiddle 在这里：

HTML
    <div>
    <ul>
        <li><img src="http://b-i.forbesimg.com/geristengel/files/2013/05/i-ella-fashion-closet.jpg" class="imgs"/></li>
        <li><img src="http://cdn.playbuzz.com/cdn/2bff0e00-cbe8-49e5-85d4-7e4c052df449/f097abfe-d3d6-42c5-9768-11616bc985e2.jpg" class="imgs"/></li>
        <li><img src="http://www.lakecityphotography.com/design/images/fashion.jpg" class="imgs"/></li>
        <li><img src="http://www.thefashionhall.com.br/wp-content/uploads/2012/12/hnjh.jpg" class="imgs"/></li>
    </ul>
    </div>

CSS:

ul{
    list-style:none;

}

li{

    position:absolute;
}

.imgs{
    height:130px;
    width:180px;
    float:left;
}

div{
    overflow:hidden;
    position:relative;
}

Fiddle: https://jsfiddle.net/mkv9x2fg/2/

Answer 1

尝试从 li

中删除绝对位置

ul {
  list-style: none;
  white-space:nowrap;

} 

li {
   display:inline-block; 
  
  }


.imgs {
  height: 130px;
  width: 180px;


}
div {
  overflow: hidden;
  position: relative;
}

<div>
  <ul>
    <li>
      <img src="http://b-i.forbesimg.com/geristengel/files/2013/05/i-ella-fashion-closet.jpg" class="imgs" />
    </li>
    <li>
      <img src="http://cdn.playbuzz.com/cdn/2bff0e00-cbe8-49e5-85d4-7e4c052df449/f097abfe-d3d6-42c5-9768-11616bc985e2.jpg" class="imgs" />
    </li>
    <li>
      <img src="http://www.lakecityphotography.com/design/images/fashion.jpg" class="imgs" />
    </li>
    <li>
      <img src="http://www.thefashionhall.com.br/wp-content/uploads/2012/12/hnjh.jpg" class="imgs" />
    </li>
  </ul>
</div>

编辑：创建 li 内联块并设置 div 以隐藏溢出。

有点不清楚 OP 试图做什么。

Answer 2

尝试设置一个 div 宽度，例如 width: 200px；高度：自动：最大高度：500px；

overflow:hidden 隐藏网页上的所有内容

overflow:hidden is hiding everything on a webpage

css

slider