我和overflow: hidden
有一段艰难的时光。
基本上,我试图隐藏位于<div>
中的无序列表的溢出。
我不知道为什么这不起作用。
它不是隐藏它,而是将我的列表从水平布局分解为垂直布局。
无序列表是carousel,容器是list。
下面是我的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;
}
在这里,我的HTML;
<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>
</cfset>
-->
</ul>
</div>
<div id="images-next">
<img src="/images/images-next.jpg" width="24" height="62" alt="Next" />
</div>
<div class="clear"></div>
发布于 2010-10-20 02:44:13
好的,如果其他人也有这个问题,这可能是你的答案:
如果您试图隐藏绝对定位的元素,请确保这些绝对定位元素的容器是相对定位的。
发布于 2014-05-22 04:33:55
实际上..。
要隐藏绝对定位的元素,容器position
必须是除static
之外的任何值。除了absolute
之外,它还可以是relative
或fixed
。
发布于 2020-10-29 09:51:32
我没有得到它。我也有类似的问题,但是在我的导航栏里。
我所做的是这样保存我的navBar代码:nav>div.navlinks>ul>li*3>a
为了将悬停效果放在我定位到相对位置并设计了a::before
和a::after
的元素上,然后我在元素之前和之后放置了灰色背景,并保持悬停效果,这样当一个人悬停在<a>
上时,它们将从a外部弹出以填充<a>
。
问题是隐藏的溢出在<a>
上不起作用。
我发现,如果我删除了<li>
,简单地把<a>
放在没有<ul>
和<li>
的地方,它就能工作了。
可能的问题是什么?
https://stackoverflow.com/questions/3970455
复制相似问题