你如何创build一个不创build换行符或水平空间的隐藏的div？

我想有一个隐藏的checkbox，不占用屏幕上的任何空间。

如果我有这个：

<div id="divCheckbox" style="visibility: hidden"> 

我没有看到checkbox，但它仍然创build一个新的行。

如果我有这个：

 <div id="divCheckbox" style="visibility: hidden; display:inline;"> 

它不再创build一个新的线，但它占据了屏幕上的水平空间。

有一种方法来隐藏的div不占用任何空间（垂直或水平？

Answer 1

使用display:none;

 <div id="divCheckbox" style="display: none;"> 

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

• display: none完全从文档中删除元素，它不占用任何空间。

Answer 2

自HTML5发布以来，现在可以简单地做到：

 <div hidden>This div is hidden</div> 

注意：这不是由一些旧的浏览器支持 ，最显着的是IE <11。

隐藏属性文档（ MDN ， W3C ）

Answer 3

使用style="display: none;" 。 此外，您可能不需要有DIV，只需设置样式display: nonecheckbox上display: none可能是足够的。

Answer 4

除了CMS的答案，你可能要考虑把样式放在一个外部样式表中，并将样式赋给这个ID，如下所示：

 #divCheckbox { display: none; } 

Answer 5

既然你应该关注于CSS的可用性和普遍性，而不是使用一个id来指向一个特定的布局元素（这会导致大量或多个css文件），你应该在链接的.css文件中使用一个真正的类：

 .hidden { visibility: hidden; display: none; } 

或为极简主义者：

 .hidden { display: none; } 

现在你可以简单地通过它来应用它：

 <div class="hidden"> content </div> 

Answer 6

考虑使用<span>来隔离要标记的小段标记，而不会打乱布局。 这似乎比尝试强迫一个<div>不显示自己更惯用 – 如果实际上checkbox本身不能以您想要的方式被设置。

Answer 7

用鼠标点击显示/隐藏：

 <script language="javascript"> function toggle() { var ele = document.getElementById("toggleText"); var text = document.getElementById("displayText"); if (ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "show"; } else { ele.style.display = "block"; text.innerHTML = "hide"; } } </script> <a id="displayText" href="javascript:toggle();">show</a> <== click Here <div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div> 

来源： 这里