18
  • display:none将完全隐藏一个元素，就好像它现在的宽度和高度为零
  • visibility:hidden另一方面，将隐藏一个元素，但在文档中保留元素原始宽度和高度的矩形。

有没有办法通过纯 CSS 来隐藏一个元素，使其占用零高度但其原始宽度？将其高度设置为零不起作用，因为一旦我想再次显示它，我不知道将元素设置为哪个高度。

具体来说，我想实现以下目标：

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

编辑：解决了！这个想法是设置height:auto恢复原来的高度。

有关完整版本，请参见此处http://jsfiddle.net/yP59s/或此处的 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
4

2 回答 2

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

http://jsfiddle.net/G5cgY/

于 2013-05-21T20:22:25.363 回答
1

使用 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>

和CSS

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



.box:target{
    display:block;
}

几个月前我发现了这个小提琴，可能会有所帮助：http: //jsfiddle.net/DbXQs/

于 2013-05-21T20:21:55.697 回答