我想要一个不占用屏幕空间的隐藏复选框。
如果我有这个：
<div id="divCheckbox" style="visibility: hidden">
我没有看到复选框，但它仍然会创建一个新行。
如果我有这个：
<div id="divCheckbox" style="visibility: hidden; display:inline;">
它不再创建新行，但会占用屏幕上的水平空间。
有没有办法让隐藏的 div 不占用空间（垂直或水平？
问问题
1120743 次
10 回答
807
利用display:none;
<div id="divCheckbox" style="display: none;">
visibility: hidden隐藏元素，但它仍然占用布局中的空间。display: none从文档中完全删除元素，它不占用任何空间。
于 2010-01-02T17:02:32.107 回答
29
使用style="display: none;". 此外，您可能不需要 DIV，只需将样式设置为display: none复选框就足够了。
于 2010-01-02T17:02:26.180 回答
9
由于您应该关注 CSS 中的可用性和通用性，而不是使用 id 来指向特定的布局元素（这会导致巨大或多个 css 文件），因此您可能应该在链接的 .css 文件中使用真正的类：
.hidden {
visibility: hidden;
display: none;
}
或者对于极简主义者：
.hidden {
display: none;
}
现在您可以简单地通过以下方式应用它：
<div class="hidden"> content </div>
于 2014-01-29T16:55:32.833 回答
8
除了 CMS 的回答之外，您可能还需要考虑将样式放在外部样式表中并将样式分配给 id，如下所示：
#divCheckbox {
display: none;
}
于 2010-01-02T18:02:35.857 回答
8
要防止复选框在不将其从 DOM 中删除的情况下占用任何空间，请使用hidden.
<div hidden id="divCheckbox">
要防止复选框占用任何空间并将其从 DOM 中删除，请使用display: none.
<div id="divCheckbox" style="display:none">
于 2018-03-05T15:30:52.997 回答
5
考虑使用<span>在不破坏布局的情况下隔离要设置样式的标记的小片段。这似乎比试图强制 a<div>不显示自己更习惯 - 如果实际上复选框本身不能以您想要的方式设置样式。
于 2010-01-02T17:09:02.830 回答
5
通过鼠标单击显示/隐藏：
<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>
来源：这里
于 2016-11-07T05:45:20.730 回答
4
要在视觉上隐藏元素，但将其保留在 html 中，您可以使用：
<div style='visibility:hidden; overflow:hidden; height:0; width:0;'>
[content]
</div>
或者
<div style='visibility:hidden; overflow:hidden; position:absolute;'>
[content]
</div>
有什么问题display:none？它将元素从 html 中完全删除，因此如果需要访问隐藏元素中的某些内容，某些功能可能会被破坏。
于 2018-08-19T17:24:07.950 回答
2
display: none;这应该使元素消失并且不占用任何空间。
于 2020-04-03T11:03:19.283 回答