Question

当我尝试在移动设备中最小化浏览器或视图时，文本框未显示在正确的位置。文本框将在padder区域之外。

如果我为.vpb_main_wrapper提供了大小，那么用户名和电子邮件的对齐方式就完美无缺，但一旦我将其更改为auto，所有设计都会混乱。

上查看我的代码

这是我的HTML源代码

    <div id="content">
    <div class="padder">
        <br clear="all" />
        <center>
            <div style="font-family:Verdana, Geneva, sans-serif; font-size:24px;">Forgot Password</div>
            <br clear="all" />
            <center>
                <div id="vpb_reset_password_box">
                    <div class="vpb_main_wrapper">
                        <br clear="all">
                        <form method="post" action="javascript:void(0);">
                            <div align="left" class="vpb_title">Please enter your account username and password below to reset your password.</div>
                            <br />
                            <div align="left" class="vpb_title_info">Username:</div>
                            <div align="left" class="vpb_title_box">
                                <input type="text" name="username_reset" id="username_reset" value="" class="vpb_textAreaBoxInputs">
                            </div>
                            <div align="left" class="vpb_title_info">Email:</div>
                            <div align="left" class="vpb_title_box">
                                <input type="text" name="email_reset" id="email_reset" value="" class="vpb_textAreaBoxInputs">
                            </div>
                            <br clear="all">
                            <br clear="all">
                            <div align="left" class="vpb_buttons_1">&nbsp;</div>
                            <div align="left" class="vpb_buttons_2">    <a href="javascript:void(0);" onclick="vpb_reset_password_username_validation();" class="button button-primary button-large vpb_general_button" id="submitbtn">Forgot</a>
    <a href="<?php get_settings('home') ?>/login/" class="button button-primary button-large" id="submitbtn">Back to Login</a>

                            </div>
                        </form>
                        <br clear="all">
                        <br clear="all">
                        <div align="left" id="reset_password_status"></div>
                        <!-- Displays Response -->
                        <br clear="all">
                    </div>
                </div>
            </center>
    </div>
</div>

也是我的CSS源代码

    #content {
    background-color: #353535;
    font-family:'Lato', sans-serif;
    padding-bottom: 30px;
}
#content .padder {
    background-color: white;
    padding:5px;
    margin-right:5%;
    margin-left: 5%;
    width: auto;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
}
#vpb_reset_password_box {
    width:0 auto;
    margin-top:10px;
    margin-bottom:0px;
    background-color: green;
}
.vpb_main_wrapper {
    width:0 auto;
    background-color: red;
    float: inherit;
}
.vpb_title {
    line-height:20px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
    margin-bottom:10px;
}
.vpb_title_info {
    width:115px;
    padding-top:10px;
    float:left;
}
.vpb_title_box {
    width:300px;
    float:left;
    margin-bottom:10px;
}
.vpb_buttons_1 {
    width:115px;
    padding-top:10px;
    float:left;
}
.vpb_buttons_2 {
    width:300px;
    float:left;
}
.vpb_general_button {
    text-decoration:none;
    margin-right:0px;
}
#reset_password_status {
    width:450px;
    float:left;
}
.vpb_main_wrapper {
    /*  width:450px;*/
    margin: 0 auto;
    /*  border: solid 1px #cbcbcb;
    background-color: #FFF;
    box-shadow: 0 0 15px #cbcbcb;
    -moz-box-shadow: 0 0 15px #cbcbcb;
    -webkit-box-shadow: 0 0 15px #cbcbcb;
    -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;*/
    padding:10px;
    padding-left:20px;
    padding-right:20px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
}
/*Input Boxes Style*/
 .vpb_textAreaBoxInputs {
    min-width:260px;
    width:auto;
    height:20px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:13px;
    padding:7px;
    padding-left:10px;
    padding-right:10px;
    border: 1px solid #6CF;
    outline:none;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius:2px;
    line-height:20px;
}
.vpb_textAreaBoxInputs:focus {
    outline:none;
    border: 1px solid #6CF;
    box-shadow: 0 0 10px #6AB5FF;
    -moz-box-shadow: 0 0 10px #6AB5FF;
    -webkit-box-shadow: 0 0 10px #6AB5FF;
}
/*Error and Success Message Style*/
 .info {
    border: 1px solid #999;
    padding:12px 20px 12px 20px;
    font: bold 12px verdana;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    text-shadow: 2px 2px 2px #ccc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
    line-height:20px;
    font-weight:normal;
    color: black;
    background: #BDE5F8;
}
.success {
    border: 1px solid #999;
    padding:12px 20px 12px 20px;
    font: bold 12px verdana;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    text-shadow: 2px 2px 2px #ccc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
    line-height:20px;
    font-weight:normal;
    color: black;
    background: #DFF2BF;
}

我的填充框中的文本框

0 个答案: