如何创建一个隐藏的div，不'不创建换行符或水平空格?

小开

使用style="display: none;"。此外，你可能不需要有DIV，只要在复选框上将样式设置为display: none就足够了。

小开

最佳答案

使用display:none;

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

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

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

小开

考虑使用<span>来隔离要设置样式的标记小段，而不破坏布局。这似乎比强迫<div>不显示自己更习惯——如果实际上复选框本身不能按照你想要的方式进行样式设置的话。

小开

除了CMS的答案，你可能想要考虑将样式放在一个外部样式表中，并将样式分配给id，如下所示:

#divCheckbox {
display: none;
}

小开

因为你应该关注CSS的可用性和通用性，而不是使用id来指向特定的布局元素(这会导致巨大或多个CSS文件)，你应该在链接的.css文件中使用一个真正的类:

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

或者对于极简主义者来说:

.hidden {
display: none;
}

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

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

小开

自从HTML5发布以来，我们现在可以简单地做:

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

注意:在一些旧的浏览器中不是支持，尤其是IE <11.

隐藏的属性文档(中数，W3C)

小开

通过鼠标点击显示/隐藏:

<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>

来源:在这里

小开

为了防止复选框占用任何空间，将其从DOM中移除，请使用hidden属性。

<div hidden id="divCheckbox">

为了防止复选框占用任何空间，并且也将其从DOM中移除，请使用display: none。

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

小开

要隐藏元素< >强视觉< / >强，但将其保留在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中删除，因此如果需要访问隐藏元素中的某些内容，一些功能可能会被破坏。

小开

display: none;

This should make the element disappear and not take up any space.

小开

#divCheckbox{显示:none;}

这样就能解决问题了