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

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="example@email.com" 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