如何使用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"