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

只需添加vertical-align: top到您的输入。

.form_input_half_width {
     /* ... */

     vertical-align: top;
}

http://jsfiddle.net/Uyhnf/2/

Answer 2

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

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