CSS：隐藏元素但保持宽度（而不是高度）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16678558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: hide element but keep width (and not height)
提问by josch
display:nonewill completely hide an element as if it now had a width and height of zerovisibility:hiddenon the other hand will hide an element but reserve a rectangle of the element's original width and height in the document.
display:none将完全隐藏一个元素，就好像它现在的宽度和高度为零一样visibility:hidden另一方面将隐藏一个元素，但在文档中保留元素原始宽度和高度的矩形。
Is there a way through pure CSS, to hide an element such that it takes up zero height but its original width? Setting its height to zero doesnt work because I dont know to which height to set the element to once I want to show it again.
有没有办法通过纯 CSS 隐藏一个元素，使其占用零高度但其原始宽度？将其高度设置为零不起作用，因为一旦我想再次显示它，我不知道将元素设置为哪个高度。
Specifically I want to achieve the following:
具体来说，我想实现以下目标：
#top ul {take up zero height but original width}
#top:hover ul {restore original dimensions}
Edit: solved! The idea is to set height:autoto restore the original height.
编辑：解决了！思路是设置height:auto恢复原来的高度。
See here http://jsfiddle.net/yP59s/for the full version or here the css:
有关完整版本或此处的 css，请参见此处http://jsfiddle.net/yP59s/：
ul {margin:0px}
#top {border:1px solid}
#top ul {height:0px;overflow:hidden}
#top:hover ul {height:auto;}
and the html:
和 html：
<div id="top">
<h1>foobar</h1>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</div>
blubber
采纳答案by Axel Amthor
#top { width: 300px; height:0px; max-height:0px; }
#top:hover {height: auto; width: 300px; }
回答by argentum47
using css
使用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>
and css
和CSS
.box{
border: 2px solid #ccc;
padding:20px;
margin:20px 0 0;
max-height:150px;
max-width:300px;
display:none; }
.box:target{
display:block;
}
and i found this fiddle quite a few months back, can be helpful: http://jsfiddle.net/DbXQs/
几个月前我发现了这个小提琴，可能会有所帮助：http: //jsfiddle.net/DbXQs/
