溢出：隐藏不起作用

时间：2010-10-19 16:22:47

标签： css overflow html

嘿所有，我正处于溢出的艰难时期：隐藏。基本上我试图隐藏位于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>

感谢您的帮助。

6 个答案:

答案 0 :(得分：335)

好的，如果有其他人遇到这个问题，这可能是你的答案：

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

答案 1 :(得分：69)

实际上...

要隐藏绝对定位元素，容器position必须是static以外的任何内容。除relative之外，它可以是fixed或absolute。

答案 2 :(得分：3)

除了提供的答案：

似乎是父元素（带有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>

答案 3 :(得分：1)

我没听懂。 我在导航栏中也遇到了类似的问题。

我正在做的是用以下方式保留我的navBar代码：nav>div.navlinks>ul>li*3>a

为了将悬停效果放置在相对于我的位置，并设计了a::before和a::after，然后在元素之前和之后放置灰色背景，并以这样的方式保持悬停效果悬停在<a>上，它们将从a弹出以填充<a>。

问题是隐藏的溢出不适用于<a>。

我发现的是，如果我删除<li>并简单地将<a>放在没有<ul>和<li>的情况下，那么它就会起作用。

可能是什么问题？

答案 4 :(得分：0)

显然，有时，包含不应该解决的问题的元素的 parent 的显示属性也应该 也 < / strong>也设置为overflow:hidden，例如：

<div style="overflow: hidden">
  <div style="overflow: hidden">some text that should not overflow<div>
</div>

为什么？我不知道，但是对我有用。参见https://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565（忽略stackoverflow上的截图！）

答案 5 :(得分：0)

这对我有用

<div style="display: flex; position: absolute; width: 100%;">
  <div style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
  </div>
</div>

在父容器中添加position:absolute使其起作用。

PS：这适用于任何寻求动态截断文本的解决方案的人。

编辑：这本来是this question的答案，但是由于它们是相关的，因此可以帮助解决此问题的人，因此我也将其保留在此处，而不是将其删除。

相关问题
最新问题