Html 如何隐藏元素而不让它们在页面上占据空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2928688/
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
How to hide elements without having them take space on the page?
提问by ripper234
I'm using visibility:hiddento hide certain elements, but they still take up space on the page while hidden.
我正在使用visibility:hidden隐藏某些元素，但它们在隐藏时仍会占用页面上的空间。
How can I make them totally disappear visually, as though they are not in the DOM at all (but without actually removing them from the DOM)?
我怎样才能让它们在视觉上完全消失，就好像它们根本不在 DOM 中一样（但实际上没有从 DOM 中删除它们）？
回答by Huusom
Try setting display:noneto hide and set display:blockto show.
尝试设置display:none隐藏和设置display:block显示。
回答by Salil
use style instead like
使用样式代替
<div style="display:none;"></div>
回答by alboth - undkonsorten.com
To use display:noneis a good option just to removing an element BUT it will be also removed for screenreaders. There are also discussions if it effects SEO. There's a good, short article on that topic on A List Apart
使用display:none是一个很好的选择，只是为了删除一个元素，但它也会被屏幕阅读器删除。也有讨论它是否会影响 SEO。A List Apart 上有一篇关于该主题的不错的简短文章
If you really just want hideand not removean element, better use:
如果您真的只想隐藏而不是删除元素，最好使用：
div {
position: absolute;
left: -999em;
}
Like this it can be also read by screen readers.
像这样它也可以被屏幕阅读器阅读。
The only disadvantage of this method is, that this DIV is actually rendered and it might effect the performance, especially on mobile phones.
这种方法的唯一缺点是，这个DIV实际上是渲染的，它可能会影响性能，尤其是在手机上。
回答by Alejandro Nava
Look, instead of using visibility: hidden;use display: none;. The first option will hide but stilltakes space and the second option will hide and doesn'ttake any space.
看，而不是使用visibility: hidden;use display: none;。第一个选项将隐藏但仍占用空间，第二个选项将隐藏且不占用任何空间。
回答by Hidayt Rahman
display: noneis solution, That's completely hides elements with its space.
display: none是解决方案，这完全隐藏了元素及其空间。
Story about display:noneand visibility: hidden
关于display:none和的故事visibility: hidden
visibility:hiddenmeans the tag is not visible, but space is allocated for it on the page.
visibility:hidden表示标签不可见，但在页面上为其分配了空间。
display:nonemeans completely hides elements with its space. (although you can still interact with it through the DOM)
display:none意味着完全隐藏元素及其空间。（虽然你仍然可以通过 DOM 与它交互）
回答by Omar
The answer to this question is saying to use display:none and display:block, but this does not help for someone who is trying to use css transitions to show and hide content using the visibility property.
这个问题的答案是说使用 display:none 和 display:block，但这对尝试使用 css 转换来使用可见性属性显示和隐藏内容的人没有帮助。
This also drove me crazy, because using display kills any css transitions.
这也让我发疯了，因为使用 display 会杀死任何 css 转换。
One solution is to add this to the class that's using visibility:
一种解决方案是将其添加到使用可见性的类中：
overflow:hidden
For this to work is does depend on the layout, but it should keep the empty content within the div it resides in.
为此，它确实取决于布局，但它应该将空内容保留在它所在的 div 中。
回答by Pranay Rana
display:noneto hide and set display:blockto show.
display:none隐藏并设置display:block为显示。
回答by Anurag Priyadarshi
here's a different take on putting them back after display:none. don't use display:block/inline etc. Instead (if using javascript) set css property display to '' (i.e. blank)
这是在显示后将它们放回去的不同看法：无。不要使用 display:block/inline 等，而是（如果使用 javascript）将 css 属性显示设置为 '' （即空白）
回答by gdmanandamohon
above my knowledge it is possible in 4 ways
根据我的知识，有 4 种方式可能
- HTML
<button style="display:none;"></button> - CSS
#buttonId{ display:none; } - jQuery
$('#buttonId').prop('display':'none');&$("#buttonId").css('opacity', 0);
- HTML
<button style="display:none;"></button> - CSS
#buttonId{ display:none; } - jQuery
$('#buttonId').prop('display':'none');&$("#buttonId").css('opacity', 0);
回答by Gil
display:noneis the best thing to avoid takeup white space on the page
display:none是避免占用页面空白的最好方法
