html - 字段出错时无法制作内联提交按钮

Question

我有这样的问题。

我想始终使提交和字段内联

但是当出现错误时，轮到：

这是出现错误时表单的html代码：

 <form accept-charset="UTF-8" action="/wibiya_users/1" class="edit_user"></div>
  <div class="field">
   <div class="field_with_errors"><input id="user_email" name="user[email]" size="30" type="text" value="email@mail.com1"></div>
  </div>
 <ul>
   <li>Email is invalid</li>
</ul>

 <div class="submit">
  <a href="#" onclick="$(this).closest('form').submit(); return false;">Edit</a>
 </div>

</form>

这个CSS：

  .field{
  display:inline;
  }
   .submit{
  display:inline;
  }

尝试添加：

    .field_with_errors{
   margin:0;
    diplay:inline;
  }

但没有帮助。

有人可以提出解决方案吗？

Answer 1

将您的编辑按钮放在错误消息上方，并float:left;应用于.field. 它会起作用。

小提琴

Answer 2

您的错误消息在您的输入和提交之间......因此，当它不存在时，一切都很好，但是当它存在时，它会按下它之后的元素，在这种情况下是提交按钮。