CSS：隐藏元素但保持宽度（而不是高度） display:none将完全隐藏元素，就像它现在的宽度和高度为零一样 visibility:hidden另一方面将隐藏元素，但在文档中保留元素原始宽度和高度的矩形

有没有一种方法可以通过纯CSS隐藏一个元素，使其占据零高度，但其原始宽度？将其高度设置为零不起作用，因为我不知道在我想再次显示该元素时将其设置为哪个高度

具体而言，我希望实现以下目标：

#top ul        {take up zero height but original width}
#top:hover ul  {restore original dimensions}

编辑：解决了！其想法是设置

height:auto

以恢复原始高度

请参见此处了解完整版本或此处查看css：

ul {margin:0px}
#top {border:1px solid}
#top ul {height:0px;overflow:hidden}
#top:hover ul {height:auto;}

以及html：

<div id="top">
    <h1>foobar</h1>
    <ul>
        <li>foo</li>
        <li>bar</li>
    </ul>
</div>
blubber

福巴

福
酒吧

鲸脂

使用css

<a href="#box1">Show Box 1</a>|<a href="#box2">Show Box 2</a>|<a href="#hidebox">Hide All</a>

<div id="box1" class="box"> Contents of Box 1 </div>
<div id="box2" class="box"> Contents of Box 2 </div>

几个月前我发现这把小提琴很有用：

---

只需设置高度：当您想“恢复”高度时，自动。我不建议使用“top”作为元素ID，这是一个保留字。这并不能真正回答您的问题，但您可能希望使用较小的高度（例如1px或2px）而不是0。否则，高度为0时，将没有可悬停的表面区域。@axelamt尽管实际id不是“top”-我只是将其更改为粘贴它here@Sildoreth在

#top

的下方为

ul

设置了高度，因此只要

#top

中的其他内容没有调整大小，很好的

高度：auto

是我想要的，谢谢！尽管在不悬停时它必须与

可见性：隐藏

和

可见性：可见

相结合，否则即使内容高度为0px，内容仍会显示。检查JSFIDLE，给它一个溢出：隐藏就够了

.box{
border: 2px solid #ccc;
padding:20px;
margin:20px 0 0;
max-height:150px;
max-width:300px;
display:none;  }



.box:target{
    display:block;
}

#top         { width: 300px; height:0px; max-height:0px; }
#top:hover   {height: auto; width: 300px; }