溢出:隐藏不工作
嘿,我有一个困难的时候溢出:隐藏。 基本上我试图隐藏位于一个div中的无序列表溢出。 我不知道为什么这不工作。 它不是隐藏它,而是将我的li从水平布局分解为垂直布局。 无序列表是旋转木马,容器是列表。 我的代码如下:
CSS:
div.body .container .images { background: url(http://img.dovov.comimages-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="http://img.dovov.comimages-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="http://img.dovov.comcarousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="http://img.dovov.comcarousel-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="http://img.dovov.comcarousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="http://img.dovov.comcarousel-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="http://img.dovov.comcarousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="http://img.dovov.comcarousel-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="http://img.dovov.comcarousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="http://img.dovov.comcarousel-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="http://img.dovov.comcarousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="http://img.dovov.comcarousel-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="http://img.dovov.comcarousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="http://img.dovov.comcarousel-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="http://img.dovov.comcarousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="http://img.dovov.comcarousel-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="http://img.dovov.comcarousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="http://img.dovov.comcarousel-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="http://img.dovov.comcarousel-image-holder-over.png" width="49" height="48" alt="#images.alt[i]#" class="over" /><img src="http://img.dovov.comcarousel-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="http://img.dovov.comimages-next.jpg" width="24" height="62" alt="Next" /></div> <div class="clear"></div>
谢谢您的帮助。
好的,如果有其他人有这个问题,这可能是你的答案:
如果您试图隐藏绝对定位元素,请确保这些绝对定位元素的容器相对定位。
其实…
要隐藏一个绝对定位的元素,容器的position
必须是除static
以外的任何东西。 它可以是relative
或fixed
,除了absolute
。
如果您正在玩<SPAN>
,那么这可能是您想寻找帮助的地方: 隐藏SPAN溢出