Question

我正在尝试在网页中创建一个滑块，但是溢出：隐藏隐藏'所有内容而不是隐藏屏幕上显示的内容。我需要对齐图像，并隐藏屏幕外的所有内容。我的小提琴：

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

小提琴： https://jsfiddle.net/mkv9x2fg/2/

Answer 1

尝试从li

中移除绝对位置

＆＃13;

ul {
  list-style: none;
  white-space:nowrap;

} 

li {
   display:inline-block; 
  
  }


.imgs {
  height: 130px;
  width: 180px;


}
div {
  overflow: hidden;
  position: relative;
}

＆＃13;

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

＆＃13;

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

有点不清楚OP正在尝试做什么。

Answer 2

尝试设置像宽度一样的div宽度：200px; heigth：auto：max-height：500px;

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

2 个答案: