html隐藏换行,关于html：如何创建不创建换行符或水平空间的隐藏div？

我想要一个隐藏的复选框，该复选框不占用屏幕上的任何空间。

如果我有这个：

我没有看到该复选框，但仍会创建一个新行。

如果我有这个：

它不再创建新行，而是占用屏幕上的水平空间。

有没有办法让隐藏的div不占用空间(垂直或水平)？

这样的div有什么用吗？

@Jonno：它在AJAX中常用。 假设您有一个带有显示三角形的项目列表。 您希望在用户单击显示三角形时显示详细信息或子树。 因此，您要做的是放置细节。 然后，当用户单击三角形时，将三角形移到"中途"位置(指向东南)并触发AJAX请求以填充。 AJAX请求完成后，将三角形向南旋转并删除" display：none;"。 从s风格。 script.aculo.us库可以完成很多工作。

使用display:none;

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

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

再次显示div(以防万一有人需要像我一样)-

@anujin：为什么inline-block？ div的默认display值为block！

有没有办法做相反的事情？要将div从display: none更改为display: inline-block或等效值，而又不占用现在显示的div并移动其他DOM元素？

谢谢你，我只是用了第二部分:)

可能值得更新答案以包括隐藏的全局HTML属性，该属性自HTML5.1起可用，尽管直接来自HTML，但基本上与说display: none相同。但是，对display属性的任何使用都会覆盖hidden全局属性的行为。

自HTML5发行以来，现在可以轻松做到：

This div is hidden

注意：某些旧的浏览器(尤其是IE <11)不支持此功能。

隐藏属性文档(MDN，W3C)

不错，但是请不要放置指向w3schools的链接(在全球范围内并不准确)，而应使用MDN：developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/

将来，如果提供并非所有浏览器/客户端都支持的基于技术的新解决方案，则应包括其他将被支持的解决方案，尤其是在Web应用程序方面。

我的印象是，此页面上还有很多其他选项

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

我需要在页面加载时向我隐藏提醒消息，并希望在单击按钮时再次显示它。尝试visibility: hidden，但是显示空白。 style="display: none;"有点魅力：)

除了CMS'答案，您可能还需要考虑将样式放在外部样式表中，并将样式分配给id，如下所示：

#divCheckbox {

display: none;

}

+1，那确实是一个好建议，但是如何仅显示一个复选框却又不影响所有其他复选框的可见性？

@dotNetSoldier旧问题，但是这里应该有一个答案。您有一个名为invis的css类，可以使用JS通过ID从复选框或div中添加/删除它。

由于您应该专注于CSS的可用性和通用性，而不是使用id来指向特定的布局元素(这会导致庞大或多个css文件)，因此您可能应该在链接的.css文件中使用true类：

.hidden {

visibility: hidden;

display: none;

}

或极简主义者：

.hidden {

display: none;

}

现在，您可以通过以下方式简单地应用它：

content

这样，代码看起来更加干净！我喜欢上课而不是内联风格

考虑使用隔离要样式化的小标记段，而不破坏布局。这似乎比试图强制不显示自身更为惯用-如果实际上无法以所需的方式设置复选框本身的样式。

要防止复选框占用任何空间而不将其从DOM中删除，请使用hidden。

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

通过鼠标单击显示/隐藏：

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

}

}

show <== click Here

peek-a-boo

资料来源：这里

要以视觉方式隐藏元素，但将其保留在html中，则可以使用：

[content]

要么

[content]

display:none可能出什么问题了？它将元素从html中完全删除，因此如果某些功能需要访问隐藏元素中的某些内容，则可能会使其功能失效。