Question

包含4个div标签的示例html，其中第一个具有少量html控件，第二个和第三个div仅用于根据条件显示状态。第四个用于提交按钮。

隐藏了第一个和第二个默认可见性。但是，它占用了垂直空间，因此我的提交按钮位置有一些空白空间。如何减少空间？

我的代码：

<!-- Div 1 -->
<div>
<!-- few controls goes here -->
</div>

<!-- Div 2 -->
<div style="visibility:hidden">
<asp:CompareValidator ID="valPwd" validationgroup="valRegGroup" runat="server" ErrorMessage="Passwords don't match" CssClass="validation" ControlToCompare="txtPwd" ControlToValidate="txtConfirmPwd"></asp:CompareValidator>
</div>

<!-- Div 3 -->
<div style="visibility:hidden">
<asp:Label ID="lblStatus" runat="server" Text="" CssClass="validation"></asp:Label>
</div>   

<!-- Div 4 -->
<div style="top:0px;margin-top:0px;">
<asp:Button ID="btnValidate" runat="server" Text="Renew" 
  CssClass="SubmitButton" onclick="btnValidate_Click"  />                     
</div>

Answer 1

您可以尝试设置display: none，div不会占用布局中的任何空间。

显示您的状态或其他数据时，请设置display: block以使其可见。

使用visibility: hidden隐藏元素，但保留其在布局中的空间和位置。

要了解visibility属性，请参阅：http://www.w3.org/TR/CSS21/visufx.html#visibility

要了解display属性，请参阅：http://www.w3.org/TR/CSS21/visuren.html#display-prop

Answer 2

<div style="display:none">

将解决您的问题

显示和可见性是不同的样式属性

Answer 3

尝试display:none

的visibility:hidden内容

验证器使用display:dynamic属性来减少空间

另一种情况，如果你无法对你进行修改并进行修改，请尝试使用以下css选择器来减少空间

div[style*="visible"] {  
 display:inline;
    }  

div[style*="hidden"] {  
      display:none;
    }

Answer 4

你应该使用

风格= “显示：无” ＆GT;

而不是

风格= “能见度：隐藏”

这样就不会为未显示的元素留下任何空间。

如何消除div标签之间的垂直空间

4 个答案: