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

如果我有这个:

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

我没有看到复选框,但它仍然创建了一个新行。

如果我有这个:

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

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

是否有一种方法可以让一个隐藏的div不占用任何空间(垂直或水平)?


当前回答

显示:没有;

这将使元素消失,不占用任何空间。

其他回答

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

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

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

.hidden {
display: none;
}

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

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

使用style="display: none;"。此外,您可能不需要DIV,只需设置要显示的样式:复选框上没有样式可能就足够了。

显示:没有;

这将使元素消失,不占用任何空间。

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

#divCheckbox {
display: none;
}

为了在视觉上隐藏元素,但在html中保留它,你可以使用:

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

or

<div style='visibility:hidden; overflow:hidden; position:absolute;'>
  [content]
</div>

显示可能会出什么问题:没有?它从html中完全删除元素,因此如果需要访问隐藏的元素内容,一些功能将被破坏。