我正在开发一个用 VB.net 编写的 Web 应用程序。在应用程序的登录页面上，如果用户在没有在密码框中输入任何内容的情况下单击“登录”按钮，则会有条件地显示一条错误消息:
这一切的功能目前都正常工作，只有在密码字段中没有输入任何内容并且单击表单或“继续”按钮时才会显示消息。
但是，即使没有显示消息，也会留有空间:
我被要求删除此空格，以便在不显示错误消息时“忘记密码”链接直接显示在密码文本框下方。
但是，尽管在 CSS 中设置了错误消息元素的可见性属性，但当消息未显示时，我实际上似乎无法删除空格。
我发现这样做的唯一方法是在 CSS 中将元素的 display 属性设置为 none - 但这显然意味着消息不会显示当密码字段留空时。
字段上设置的CSS是:
.loginarea .loginerror {
color: Red;
font-size: 1.8em;
}
表单域显示为:
<body class="login">
<form id="form1" runat="server">
...
<div id="divLoginBg" runat="server" class="loginbg">
<div class="loginarea">
<asp:Panel ID="Step1" CssClass="greyblock" runat="server">
<asp:TextBox ID="Password" ValidationGroup="loginpage" autocomplete="off" TextMode="Password" runat="server" /><br />
<asp:RequiredFieldValidator ID="Req2" ValidationGroup="loginpage" ControlToValidate="Password" runat="server" CssClass="loginerror" ErrorMessage="Please enter your password" /><br />
...
</asp:Panel>
...
</div>
</div>
</form>
</body>
如何有条件地将元素的 display 属性设置为 none？即当没有在文本框中输入密码时，它的显示应该只有none吗？
最佳答案
使用 display:none 而不是 visibility:hidden 因为使用第一个使有问题的标签根本不会出现在页面上并且不会分配空间为了它。
使用第二个使标签不可见，但在页面上为其分配了空间
这是一个有效的 Fiddle
关于html - 被 CSS 隐藏的元素仍然占用页面空间-如何设置显示 : none conditionally?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54882629/