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

问题描述 投票:0回答:1

如何通过调整屏幕大小使课本和按钮的左边距始终相同? 这是我的 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>

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

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

这是屏幕变小的时候:

html css less
1个回答
1
投票

您可以在输入字段上执行

box-sizing: border-box;
,然后让提交按钮使用
margin-left: auto
。只要两者都
display: block;
,就应该有效。

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

© www.soinside.com 2019 - 2024. All rights reserved.