jquery - 将显示设置为可见时表单元素的垂直对齐方式跳跃

Question

我有一个表单，其中在提交时，如果某些值为空，则会显示错误。这是使用以下代码完成的:

<div class="form_input_row_container">
   <div class="form_input_half_width" id="form_input_first_name">
      <input type="text" id="first_name" name="first_name" placeholder="First Name" value="" class="errorable" />
      <div id="first_name_error" class="form_error_msg"></div>
   </div>
<div class="form_input_half_width" id="form_input_last_name">
   <input type="text" id="last_name" name="last_name" placeholder="Last Name" value="" class="errorable" />
      <div id="last_name_error" class="form_error_msg"></div>
   </div>
</div>

使用 CSS:

input[type="text"],
input[type="password"],
input[type="email"] {
  width: 100%;
}
.form_input_full_width,
.form_input_row_container {
  width: 80%;
  margin: 0 auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.form_input_full_width {
  margin-bottom: 20px; 
}
.form_input_half_width {
  width: 45%;
  margin: 0px;
  padding: 0px;
  margin-bottom: 20px;
  display: inline-block;
}
.form_input_half_width#form_input_last_name {
  margin-left: 1%;
}
.form_error_msg {
  background-color: #f00;
  color: #000;
  display: none;
}
.form_error_input {
  outline: none;
  border-color: #ff0000;
  box-shadow: 0 0 20px #ff0000;
}

有一些 javascript 设置了 first_name_error 和 last_name_error 的 html 内容，并设置了 display: block;(它被设置为 display: none; 默认)。

然而，当发生这种情况时，没有错误的字段的垂直对齐似乎出错了(它向下跳)。

谁能告诉我为什么会发生这种情况以及如何解决？

Answer 1

出现此问题是因为当您添加验证消息时，它会拉伸(stretch)包含表单输入 div 的元素的大小。默认的 vertical-align 会将它们设置在底部。

您可以通过以不会拉伸(stretch)您的容器的方式定位错误消息来修复它(我会使用 jQuery UI 的 .position())或者您可以简单地使用 vertical-align: top 在您的表单输入 div 上，尽管使用第二个选项您的 div 仍会拉伸(stretch)。