如何使用 CSS 隐藏 HTML 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19400139/
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 An HTML Element With CSS?
提问by William
I am trying to hide an HTML element with CSS.
我试图用 CSS 隐藏一个 HTML 元素。
<select id="tinynav1" class="tinynav tinynav1">
but its very resilient, even with Google Inspect element I cannot change the styling
但它非常有弹性，即使使用 Google Inspect 元素我也无法更改样式
Any ideas?
有任何想法吗？
Thank you :-)
谢谢 ：-）
回答by Vinay Pratap Singh
It's simple, just set the displayproperty to nonein CSS:
很简单，只需在 CSS中将display属性设置为none：
#tinynav1
{
display:none
}
again when you would like to show it set the displayto block.
再次，当你想显示其设置display到block。
visibility: hiddenhides the element, but it still takes up space in the layout.
visibility: hidden隐藏元素，但它仍然占用布局中的空间。
display: noneremoves the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
display: none从文档中完全删除元素。它不占用任何空间，即使它的 HTML 仍在源代码中。
Other advantages of using display:
使用的其他优点display：
display:nonemeans that the element in question will not appear on the page at all (although you can still interact with it through the DOM). There will be no space allocated for it between the other elements.visibility:hiddenmeans that unlike display:none, the element is not visible, but space is allocated for it on the page.
display:none意味着有问题的元素根本不会出现在页面上（尽管您仍然可以通过 DOM 与它交互）。其他元素之间不会为它分配空间。visibility:hidden意味着与 不同display:none，该元素不可见，但在页面上为其分配了空间。
回答by Kishori
use display:none;or visibility:hidden;
使用display:none;或visibility:hidden;
回答by Markus
CSS:
CSS：
select#tinynav1 { display: none; }
or if multiple selects should be hidden, use the corresponding class:
或者如果应该隐藏多个选择，请使用相应的类：
select.tinynav1 { display: none; }
As inline-style you could do it also (which you can try for inspector):
作为内联样式，您也可以这样做（您可以尝试检查器）：
<select id="tinynav1" style="display: none">
回答by Pbk1303
You can use display:noneor visibility:hidden, based on your requirements:
您可以根据您的要求使用display:none或visibility:hidden：
#tinynav{display:none;}
or
或者
#tinynav{visibility:hidden;}
Refer the below URL for better understanding of display:noneand visibility:hidden.
请参阅以下 URL 以更好地理解display:none和visibility:hidden。
回答by matewka
Use this CSS
使用这个 CSS
.tinynav {
display: none;
}
or
或者
.tinynav {
visibility: hidden;
}
The difference is that the former will make the selectnot rendered at all and the latter will make the selectrendered (it will take the space of the document) but it will be completely invisible;
区别在于前者会使select根本不渲染，后者会使select渲染（会占用文档的空间）但完全不可见；
Here's a fiddle to show the difference: http://jsfiddle.net/rdGgn/2/
You should notice an empty space before the text in third line. It is the select that is rendered but not visible. There is no space before the second line of text, because the select is'nt rendered at all (it has display:none).
这是一个显示差异的小提琴：http: //jsfiddle.net/rdGgn/2/
您应该注意到第三行文本前有一个空格。它是呈现但不可见的选择。第二行文本之前没有空格，因为根本没有渲染选择（它有display:none）。
There is also a third option which is
还有第三种选择是
.tinynav {
opacity: 0;
}
It behaves almost the same as visibility: hiddenbut the only difference is that with opacity: 0you can still click the select. With visibility: hiddenit is disabled.
它的行为几乎相同，visibility: hidden但唯一的区别是opacity: 0您仍然可以单击选择。随着visibility: hidden它被禁用。
回答by Ridcully
Use style="display:none"directly on the <select>or create a css class having that setting and assign the class to the <select>.
style="display:none"直接使用<select>或创建具有该设置的 css 类并将该类分配给<select>.
回答by MildlySerious
If you want to hide it and collapse the space it would need, use display: none;if you want to keep the space, use visibility: hidden.
如果你想隐藏它并折叠它需要的空间，display: none;如果你想保留空间，请使用visibility: hidden.
<select id="tinynav1" class="tinynav tinynav1">
CSS
CSS
.tinynav {
display: none;
}
