переполнение: скрытый не работает

Привет всем, у меня возникли трудное время с overflow: скрыты. В основном я пытаюсь скрыть переполнение неупорядоченного списка, который находится в div. Я понятия не имею, почему это не работает так. Вместо того, чтобы скрывать его, он разбивает мои li от горизонтального макета до вертикального макета. Неупорядоченный список-это карусель, а контейнер-список. Мой код ниже:

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>

Спасибо за помощь.

3 84
html css overflow

3 ответа:

хорошо, если у кого - то еще есть эта проблема, это может быть ваш ответ:

Если вы пытаетесь скрыть абсолютные позиционированные элементы, убедитесь,что контейнер этих абсолютных позиционированных элементов расположен относительно.

303

на самом деле...

чтобы скрыть абсолютный позиционированный элемент, контейнер position должно быть все, кроме static. Это может быть relative или fixed кроме absolute.

63

в дополнение к предоставленным ответам:

похоже на родительский элемент (тот, с overflow:hidden)не должен быть display:inline. Изменение на display:inline-block работал для меня.

.outer {
  position: relative;
  border: 1px dotted black;
  padding: 5px;
  overflow: hidden;
}
.inner {
  position: absolute;
  left: 50%;
  margin-left: -20px;
  top: 70%;
  width: 40px;
  height: 80px;
  background: yellow;
}
<span class="outer">
  Some text
  <span class="inner"></span>
</span>
<span class="outer" style="display:inline-block;">
  Some text
  <span class="inner"></span>
</span>
2