Html 如何创建不包含'；是否创建换行符或水平空间？

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

如果我有这个：

<div id="divCheckbox" style="visibility: hidden">

<div id="divCheckbox" style="visibility: hidden; display:inline;">

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

如果我有这个：

<div id="divCheckbox" style="visibility: hidden">

<div id="divCheckbox" style="visibility: hidden; display:inline;">

它不再创建新行，但会占用屏幕上的水平空间

---

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

使用

style=“display:none；”“

。此外，您可能不需要使用div，只需在复选框中将样式设置为

display:none

，就足够了。

使用

display:none；

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

• visibility:hidden

  隐藏元素，但它仍会占用布局中的空间

• display:none

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

---

考虑使用<代码> <代码>将标记的小片段分隔成不损坏布局。这比试图强制<代码> <代码>不显示自身更为习惯。如果事实上复选框本身不能按您想要的方式来设计。

< P>除了CMS的回答席外，您还可以考虑将THE设置为TH。e外部样式表中的样式，并将样式指定给id，如下所示：

#divCheckbox {
display: none;
}

---

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

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

或者对于极简主义者：

.hidden {
display: none;
}

现在，您只需通过以下方式进行应用：

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

内容

由于one的发布现在只需执行以下操作：

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

此div被隐藏

注意：这不是一些旧浏览器所能做到的，尤其是IE<11

---

隐藏属性文档（，）

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

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

函数切换（）{
var ele=document.getElementById（“toggleText”）；
var text=document.getElementById（“displayText”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
text.innerHTML=“显示”；
}
否则{
ele.style.display=“块”；
text.innerHTML=“隐藏”；
}
}
要防止复选框在不将其从DOM中删除的情况下占用任何空间，请使用
hidden

<div hidden id="divCheckbox">

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

<div style='visibility:hidden; overflow:hidden; height:0; width:0;'>
  [content]
</div>


[内容]

或


[内容]

display可能出现什么问题：none
？它从html中完全删除元素，因此如果需要访问隐藏元素中的某些内容，某些功能可能会被破坏。

display:none；
这样的div有什么用处吗？@Jonno:它在AJAX中很常用。假设您有一个带有披露三角形的项目列表。您希望在用户单击披露三角形时显示详细信息或子树。因此，您要做的是将详细信息放在应该放在的位置。然后，当用户单击该三角形时，您将将三角形移动到“中间”位置（指向东南），并发出AJAX请求以填写。AJAX请求完成后，将三角形向南旋转并删除“显示：无”从的样式来看。script.aculo.us库经常这样做。+1，这确实是一个很好的建议，但是如何只显示一个复选框而不影响所有其他复选框的可见性？@dotNetSoldier旧问题，但这里应该有一个答案。您有一个名为Invi的css类，可以使用JS.t从复选框或div by id中添加/删除它o再次展示div（以防万一有人需要我）-
@anujin:为什么
内联块
？div的默认
显示
值是
块
！有没有相反的方法？将div从
显示：无
更改为
显示：内联块
或等效值，而不让现在显示的div占用空间并移动其他DOM元素？m更新答案以包含可用的全局HTML属性是值得的，因为它基本上与直接从HTML中说的
display:none
相同。但是
display
属性的任何使用都会覆盖
hidden
全局属性的行为。我需要在第1页隐藏我的警报消息oad并希望在单击按钮时再次显示它。尝试了
可见性：隐藏
，但显示的是空白。
style=“display:none；”“
工作起来很有魅力：）这样代码看起来干净多了！我更喜欢使用类而不是内联样式“可见性：隐藏”；这正是我所需要的，谢谢！感谢大家对我的答案的格式发表评论。这在语义上比用CSS隐藏更正确，更便于访问，而且所有主流浏览器都支持它。这应该是2020年可以接受的答案。这与“显示：无”相比如何，特别是考虑到淡出动画？