我想有一个隐藏的复选框，不占用屏幕上的任何空间。
如果我有这个:
<div id="divCheckbox" style="visibility: hidden">
我没有看到复选框，但它仍然创建了一个新行。
如果我有这个:
<div id="divCheckbox" style="visibility: hidden; display:inline;">
它不再创建新的行，但它会占用屏幕上的水平空间。
是否有一种方法可以让一个隐藏的div不占用任何空间(垂直或水平)?
当前回答
使用style="display: none;"。此外，您可能不需要DIV，只需设置要显示的样式:复选框上没有样式可能就足够了。
其他回答
因为你应该关注CSS的可用性和通用性，而不是使用id来指向特定的布局元素(这会导致巨大或多个CSS文件)，你应该在链接的.css文件中使用一个真正的类:
.hidden {
visibility: hidden;
display: none;
}
或者对于极简主义者来说:
.hidden {
display: none;
}
现在你可以简单地应用它通过:
<div class="hidden"> content </div>
为了在视觉上隐藏元素，但在html中保留它，你可以使用:
<div style='visibility:hidden; overflow:hidden; height:0; width:0;'>
[content]
</div>
or
<div style='visibility:hidden; overflow:hidden; position:absolute;'>
[content]
</div>
显示可能会出什么问题:没有?它从html中完全删除元素，因此如果需要访问隐藏的元素内容，一些功能将被破坏。
#divCheckbox{显示:none;}
这样就能解决问题了
通过鼠标点击显示/隐藏:
<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>
来源:这里
除了CMS的答案，你可能想要考虑将样式放在一个外部样式表中，并将样式分配给id，如下所示:
#divCheckbox {
display: none;
}
