Html 如何创建不创建换行符或水平空间的隐藏 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1992114/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you create a hidden div that doesn't create a line break or horizontal space?
提问by leora
I want to have a hidden checkbox that doesn't take up any space on the screen.
我想要一个不占用屏幕空间的隐藏复选框。
If I have this:
如果我有这个：
<div id="divCheckbox" style="visibility: hidden">
I don't see the checkbox, but it still creates a new line.
我没有看到复选框，但它仍然会创建一个新行。
If I have this:
如果我有这个：
<div id="divCheckbox" style="visibility: hidden; display:inline;">
it no longer creates a new line, but it takes up horizontal space on the screen.
它不再创建新行，但会占用屏幕上的水平空间。
Is there a way to have a hidden div that takes up no room (vertical or horizontal?
有没有办法让隐藏的 div 不占用空间（垂直或水平？
回答by CMS
Use display:none;
用 display:none;
<div id="divCheckbox" style="display: none;">
visibility: hiddenhides the element, but it still takes up space in the layout.display: noneremoves the element completely from the document, it doesn't take up any space.
visibility: hidden隐藏元素，但它仍然占用布局中的空间。display: none从文档中完全删除元素，它不占用任何空间。
回答by C_B
回答by tvanfosson
Use style="display: none;". Also, you probably don't need to have the DIV, just setting the style to display: noneon the checkbox would probably be sufficient.
使用style="display: none;". 此外，您可能不需要 DIV，只需将样式设置display: none为复选框就足够了。
回答by Zeta Two
In addition to CMS′ answer you may want to consider putting the style in an external stylesheet and assign the style to the id, like this:
除了 CMS 的答案，您可能还需要考虑将样式放在外部样式表中并将样式分配给 id，如下所示：
#divCheckbox {
display: none;
}
回答by Dave
Since you should focus on usability and generalities in CSS, rather than use an id to point to a specific layout element (which results in huge or multiple css files) you should probably instead use a true class in your linked .css file:
由于您应该关注 CSS 中的可用性和通用性，而不是使用 id 指向特定布局元素（这会导致巨大或多个 css 文件），因此您可能应该在链接的 .css 文件中使用真正的类：
.hidden {
visibility: hidden;
display: none;
}
or for the minimalist:
或对于极简主义者：
.hidden {
display: none;
}
Now you can simply apply it via:
现在您可以通过以下方式简单地应用它：
<div class="hidden"> content </div>
回答by Rich Churcher
Consider using <span>to isolate small segments of markup to be styled without breaking up layout. This would seem to be more idiomatic than trying to force a <div>not to display itself--if in fact the checkbox itself cannot be styled in the way you want.
考虑使用<span>隔离要设置样式的标记的小部分而不破坏布局。这似乎比试图强制<div>不显示自己更惯用- 如果实际上复选框本身无法按照您想要的方式设置样式。
回答by Mahdi Jazini
Show / hide by mouse click:
通过鼠标单击显示/隐藏：
<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>
Source: Here
来源：这里
回答by smac89
To prevent the checkbox from taking up any space withoutremoving it from the DOM, use hidden.
要防止复选框占用任何空间而不将其从 DOM 中删除，请使用hidden.
<div hidden id="divCheckbox">
To prevent the checkbox from taking up any space and alsoremoving it from the DOM, use display: none.
为了防止该复选框从占用任何空间，也从DOM，使用移除它display: none。
<div id="divCheckbox" style="display:none">
回答by THN
To hide the element visually, but keep it in the html, you can use:
要在视觉上隐藏元素，但将其保留在 html 中，您可以使用：
<div style='visibility:hidden; overflow:hidden; height:0; width:0;'>
[content]
</div>
or
或者
<div style='visibility:hidden; overflow:hidden; position:absolute;'>
[content]
</div>
What may go wrong with display:none? It removes the element completely from the html, so some functionalities may be broken if they need to access something in the hidden element.
可能会出现什么问题display:none？它从 html 中完全删除元素，因此如果某些功能需要访问隐藏元素中的某些内容，则它们可能会被破坏。
回答by Jose Luis Rasmussen Garcia
display: none;This should make the element disappear and not take up any space.
这应该使元素消失而不占用任何空间。
