css - 验证错误向右移动按钮 - CSS

Question

.password-reset {
  padding: 40px 50px 0;
  float: left;
}
.form-field {
  float: left;
  font-size: 18px;
  color: #fff;
  margin-right: 15px;
}
.form-field--wide {
  width: 100%;
  float: left;
  margin-bottom: 20px;
}
.form-field label {
  margin-bottom: 3px;
  width: 100%;
  display: block;
  color: black;
}
.form-field input {
  padding: 10px;
  color: #000;
  width: 245px;
  float: left;
}
.form-field input.error {
  color: #ed1b2e;
}
.form-field--half {
  width: 48%;
  margin: 0;
}
.form-field--half input {
  width: 100%;
}
.form-field--repos {
  float: right;
}
.form-error {
  color: #ed1b2e;
  font-size: 14px;
  float: left;
  margin: 5px 3px 0 0;
  display: inline-block;
}
.form-error.alert {
  clear: both;
}
.form-error ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.form-error li {
  /*display: inline-block;*/
  margin-right: 3px;
}
.form-field--wide .form-error {
  font-size: 18px;
  color: #ed1b2e;
  padding: 0 10px;
  font-size: 18px;
  width: 180px;
  float: left;
  line-height: normal;
  margin-top: 0;
}

<div class="password-reset">
  <form id="passwordReminderForm" action="/service/public/passwordReminder.do?siteLanguage=en" method="post">
    <div class="form-field form-field--half">
      <label for="user">Username</label>
      <div class="input error-input">
        <input id="passwordReminderFormUsername" name="username" value="" type="text">
      </div>
    </div>
    <!-- .form-field -->

    <div class="form-field form-field--half form-field--repos">
      <label for="email">E-mail</label>
      <div class="input error-input">
        <input style="width: 120%;" id="passwordReminderFormEmail" name="email" value="" type="text">
      </div>
    </div>
    <!-- .form-field -->
    <div class="verification-messages message--red">
      <div id="passwordReminderForm.errors" class="form-error">"E-mail" must be set
        <br>"Username" must be set</div>
    </div>
    <input class="btn btn--top-offset js-validate-image submit-form" value="Remind Me" type="submit">
    <input name="_csrf" value="7035c910-22bf-49b9-b0b3-facd9d460fbd" type="hidden">
  </form>
</div>

我提供了 CSS 和 HTML 代码。如您所见，问题是验证错误将“提醒我”按钮移到了右侧，但它应该始终位于左侧。我怎样才能做到这一点？有什么建议么？如果需要，我会提供按钮样式。 link to fiddle

Answer 1

您需要先清除继承的左侧，然后使用 css 将 float float left 应用到按钮上

.form-submit-button{
    clear:left;
    float:left;
}

<input class="btn btn--top-offset js-validate-image submit-form form-submit-button" value="Remind Me" type="submit">

这是js fiddle

Demo code