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

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 divs，虽然第二个选项你的div仍然可以伸展。