如何通过调整屏幕大小使文本框和按钮的左边距始终相同

Question

如何通过调整屏幕大小使课本和按钮的左边距始终相同？ 这是我的 CSS 代码：

.forgot-password-textbox {
    font-size: @textbox-font-size;
    border-radius: @textbox-border-radius;
    border: @border-lines solid @Black;
    padding: @padding-40 / 4;
    width: @forgot-password-textbox-width;
    box-shadow: 0 1px @Grey;
    margin-bottom: @forgot-password-textbox-margin-bottom;
    position:relative;
}


.forgot-password-button {
    margin-left: @forgot-password-textbox-button-margin-left;
    margin-top: auto; 
    width: 40%;
    height: 45px;
    position:relative;
}

这是我的 HTML：

<div>
    <div>Email Address</div>
    <div><input type="email" name="email" placeholder="[email protected]" id="email" class="forgot-password-textbox"></div>
    <div>
        <label id="Message" class="forgot-password-error-message"></label>
    </div>
    <div>
        <input type="button" value="Submit" id="btn-reset-password" onclick="resetPasswordHandler()" class="orange-button forgot-password-button">
    </div>
</div>

我需要电子邮件文本框和提交按钮以与所有页面尺寸右对齐。

这就是我在常规屏幕上看到页面的方式：

这是屏幕变小的时候：

Answer 1

您可以在输入字段上执行

box-sizing: border-box;

，然后让提交按钮使用

margin-left: auto

。只要两者都

display: block;

，就应该有效。

这是用于概念验证的 JSBin：http://jsbin.com/helosub/1/edit?css,output