css – overflow:hidden不工作

前端之家收集整理的这篇文章主要介绍了css – overflow:hidden不工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
嘿,我有一个艰难的时间与溢出:隐藏。基本上我试图隐藏一个无序列表的溢出位于一个div。我不知道为什么这不工作,虽然。而不是隐藏它,它打破了我的水平布局到垂直布局。无序列表是轮播,容器是列表。我的代码如下:

CSS:

div.body .container .images {
 background: url(/images/images-background.jpg);
 height: 62px;
 margin-bottom: 17px;
 width: 384px;
}
div.body .container .images #images-prevIoUs {
 cursor: pointer;
 float: left;
}
div.body .container .images #images-next {
 cursor: pointer;
 float: left;
}
div.body .container .images .list {
 float: left;
 overflow: hidden;
 vertical-align: top;
 width: 336px;
}
div.body .container .images .carousel {
 margin-bottom: 6px;
 margin-top: 8px;
 width: 336px;
}

我的代码

<div class="images">
 <div id="images-prevIoUs"><img src="/images/images-prevIoUs.jpg" width="24" height="62" alt="PrevIoUs" /></div>
 <div class="list">
  <ul class="carousel">
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li> 
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>    
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <!---
   <cfset i=1>
   <cfloop condition="i lte images.recordcount">
    <cfoutput><li><img src="#images.thumburl[i]#" width="44" height="44" alt="#images.alt[i]#" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="#images.alt[i]#" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="#images.alt[i]#" class="under" /></li></cfoutput>
    <cfset i=i+1>
   </cfloop>
   --->
  </ul>
 </div>
 <div id="images-next"><img src="/images/images-next.jpg" width="24" height="62" alt="Next" /></div>
 <div class="clear"></div>

谢谢您的帮助。

解决方法

好吧,如果任何人有这个问题,这可能是你的答案:

如果你试图隐藏绝对定位元素,请确保这些绝对定位元素的容器相对定位。

原文链接:https://www.f2er.com/css/223116.html

猜你在找的CSS相关文章