Question

我希望隐藏的复选框不占用屏幕上的任何空间。

如果我有这个：

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

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

如果我有这个：

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

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

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

Answer 1

使用display:none;

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

visibility: hidden隐藏了元素，但它仍占用了布局中的空间。
display: none从文档中完全删除元素，它不会占用任何空间。

Answer 2

自HTML5发布后，现在只需执行以下操作：

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

注意：某些旧浏览器不是supported，最明显的是IE＆lt; 11.

隐藏属性文档（MDN，W3C）

Answer 3

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

Answer 4

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

#divCheckbox {
display: none;
}

Answer 5

因为你应该专注于CSS中的可用性和通用性，而不是使用id指向特定的布局元素（导致巨大或多个css文件），你可能应该在链接的.css文件中使用真正的类：

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

或极简主义者：

.hidden {
display: none;
}

现在您只需通过以下方式应用它：

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

Answer 6

考虑使用<span>来隔离要设置样式的小段标记，而不会破坏布局。这似乎比试图迫使<div>不显示自己更具惯用性 - 如果事实上复选框本身无法按照您想要的方式设置样式。

Answer 7

点击鼠标显示/隐藏

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

来源：Here

Answer 8

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

<div hidden id="divCheckbox">

要阻止该复选框占用任何空格，还将其从DOM中删除，请使用display: none。

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

Answer 9

要隐藏元素 视觉上 ，但将其保留在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中完全删除，因此如果某些功能需要访问隐藏元素中的某些内容，则可能会使其功能失效。

Answer 10

I have no idea how the regex would look!

                A                                      C
1   R13_IR_T20I1E7_PP3_S1_N002_V087_1785984_12593   S1_1785984
2   R13_IR_T20I1E7_PP3_S1_N003_V023_5896589_15105   S1_5896589
3   R13_IR_T20I1E7_PP3_S1_N004_V155_2541236_11033   S1_2541236

这应该使元素消失并且不占用任何空间。

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

10 个答案: