通过CSS隐藏元素的可能方法是什么[关闭]答案

【问题标题】：What are the possible ways to hide an element via CSS [closed]通过CSS隐藏元素的可能方法是什么[关闭]
【发布时间】：2013-10-16 09:47:51
【问题描述】：

我正在尝试使用 CSS 隐藏 HTML 元素。

<select id="tinynav1" class="tinynav tinynav1">

但它非常有弹性，即使使用 Google Inspect 元素我也无法更改样式。

【问题讨论】：

-1 因为当我用谷歌搜索“隐藏元素 css”时，这是第一个结果：w3schools.com/css/css_display_visibility.asp，还有另一个用于 stackoverflow，所以这也可以看作是这个 @ 的重复987654322@
只是.... tinyurl.com/pwpfjmq
这非常简单。 display:none。我不敢相信你不会已经尝试过。如果这里确实有一个更大的问题可以证明您的“非常有弹性”的评论是合理的，那么请提供更多证据，也许是一个证明它的小提琴示例，以便我们了解您的意思，因为您提出问题的方式，我们可以做的是建议display:none，这太明显了，几乎不值得发帖。
它也不适合我。来一探究竟，是因为我有class="class1" class="class2" 而不是class="class1 class2"。我想这对大多数人来说似乎是痛苦的基本，但这是我错过的。希望这可以使某人免于几个小时的挫败感。

【解决方案1】：

很简单，只需在CSS中将display属性设置为none即可：

#tinynav1
{
  display:none
}

再次，当您想显示它时，将display 设置为block。

visibility: hidden 隐藏了元素，但它仍然占用布局中的空间。

display: none 将元素从文档中完全移除。它不占用任何空间，即使它的 HTML 仍在源代码中。

使用display的其他优势：

display:none 表示相关元素根本不会出现在页面上（尽管您仍然可以通过 DOM 与它进行交互）。其他元素之间不会为其分配空间。
visibility:hidden 表示与display:none 不同，该元素不可见，但在页面上为其分配了空间。

【讨论】：

【解决方案2】：

使用display:none; 或visibility:hidden;

【讨论】：

【解决方案3】：

CSS：

select#tinynav1  { display: none; }

或者如果应该隐藏多个选择，请使用相应的类：

select.tinynav1  { display: none; }

作为内联样式，您也可以这样做（您可以尝试检查员）：

<select id="tinynav1" style="display: none">

【讨论】：

【解决方案4】：

您可以根据自己的要求使用display:none 或visibility:hidden：

#tinynav{display:none;}

或

 #tinynav{visibility:hidden;}

请参阅以下网址以更好地了解display:none 和visibility:hidden。

【讨论】：

【解决方案5】：

如果你想隐藏它并折叠它需要的空间，使用display: none;如果你想保留空间，使用visibility: hidden。

<select id="tinynav1" class="tinynav tinynav1">

CSS

.tinynav {
    display: none;
}

【讨论】：

【解决方案6】：

直接在<select> 上使用style="display:none" 或创建具有该设置的css 类并将该类分配给<select>。

【讨论】：

【解决方案7】：

使用这个 CSS

.tinynav {
    display: none;
}

或

.tinynav {
    visibility: hidden;
}

不同之处在于前者会让select完全不渲染，后者会让select渲染（会占用文档的空间）但完全不可见；

这是一个显示差异的小提琴：http://jsfiddle.net/rdGgn/2/
您应该注意到第三行文本前有一个空格。它是呈现但不可见的选择。第二行文本之前没有空格，因为选择根本没有呈现（它有display:none）。

还有第三种选择

.tinynav {
    opacity: 0;
}

它的行为几乎与visibility: hidden 相同，但唯一的区别是opacity: 0 您仍然可以单击选择。 visibility: hidden 被禁用。

【讨论】：