驗證錯誤移動按鈕右 - CSS

.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

來源

2015-08-25 fishera

解決方案取決於您的需求。有1點十億的方式來做到這一點，例如，使用模式彈出來替代，或者另一種佈局思想，等等... –

我不希望任何彈出我只是想按鈕留在左側 – fishera

它應該總是在左邊的*哪裏*？在驗證錯誤消息之上，在它們下面？在他們的左邊？你能展示你想要實現的佈局的簡單圖片嗎？當我不會有驗證錯誤時，您的解決方案按鈕中的 –

您需要首先清除是繼承了左，只是採用浮球留給按鈕這裏使用CSS是

.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小提琴

Demo code

來源

2015-08-25 07:53:16

正如上面說這是可以實現的方法很多，

你可以做 - 消息DIV

<div class="verification-messages message--red"> 
     <input class="btn btn--top-offset js-validate-image submit-form" value="Remind Me" type="submit"> 
     <div id="passwordReminderForm.errors" class="form-error">"E-mail" must be set 
     <br>"Username" must be set</div> 
</div>

之前移動輸入按鈕，或者如果你沒有，你甚至可以玩用CSS的float想要更改標記。

來源

2015-08-25 07:32:33 radiant

將不會顯示。 – fishera

在按鈕之前插入<br style="clear: left;" />。

.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> 
 
    <br style="clear: left;" /> 
 
    <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>

來源

2015-08-25 07:40:38 connexo

驗證錯誤移動按鈕右 - CSS

回答

相關問題