如何使用CSS隐藏HTML元素？

Question

我想用CSS隐藏一个HTML元素。

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

但它非常有弹性，甚至与谷歌检查元素我不能改变造型

任何想法？

谢谢:-)

Answer 1

使用display:none;或visibility:hidden;

Answer 2

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

#tinynav1 
{ 
    display:none 
} 

再次，当你想显示其设置display至block。

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

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

使用display的其他优点：

display:none意味着有问题的元素不会在所有的页面上出现（虽然你可以用它通过DOM仍然交互）。在其他元素之间将不会分配空间。
visibility:hidden表示与display:none不同，该元素不可见，但在页面上为其分配空间。

Answer 3

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

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

CSS

.tinynav { 
    display: none; 
} 

Answer 4

CSS：

select#tinynav1 { display: none; } 

或者多个选择应该被隐藏，使用相应等级：

select.tinynav1 { display: none; } 

由于内嵌式的你可以也这样做（你可以尝试一下pector）：

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

Answer 5

使用此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它被禁用。

Answer 6

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

Answer 7

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

#tinynav{display:none;} 

或

#tinynav{visibility:hidden;} 

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

Difference between "display:none" and "visibility:hidden"