CSS输入的宽度：100％超出了父级的界限

Question

我试图制作一个由两个输入字段组成的登录表单，并带有插入填充，但是这两个字段总是最终超出其父级的边界。该问题源于添加的 插图
填充。为了解决这个问题可以采取什么措施？

注意：该代码可能不是最干净的。例如，可能根本不需要封装文本输入的span元素。

    #mainContainer {

        line-height: 20px;

        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

        background-color: rgba(0,50,94,0.2);

        margin: 20px auto;

        display: table;

        -moz-border-radius: 15px;

        border-style: solid;

        border-color: rgb(40, 40, 40);

        border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;

        border-radius: 2px;

        border-radius: 2px 5px / 5px;

        box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);

    }



    .loginForm {

        width: 320px;

        height: 250px;

        padding: 10px 15px 25px 15px;

        overflow: hidden;

    }



    .login-fields > .login-bottom input#login-button_normal {

        float: right;

        padding: 2px 25px;

        cursor: pointer;

        margin-left: 10px;

    }



    .login-fields > .login-bottom input#login-remember {

        float: left;

        margin-right: 3px;

    }



    .spacer {

        padding-bottom: 10px;

    }



    /* ELEMENT OF INTEREST HERE! */

    input[type=text],

    input[type=password] {

        width: 100%;

        height: 20px;

        padding: 5px 10px;

        background-color: rgb(215, 215, 215);

        line-height: 20px;

        font-size: 12px;

        color: rgb(136, 136, 136);

        border-radius: 2px 2px 2px 2px;

        border: 1px solid rgb(114, 114, 114);

        box-shadow: 0 1px 0 rgba(24, 24, 24,0.1);

    }



    input[type=text]:hover,

    input[type=password]:hover,

    label:hover ~ input[type=text],

    label:hover ~ input[type=password] {

        background:rgb(242, 242, 242) !important;

    }



    input[type=submit]:hover {

      box-shadow:

        inset 0 1px 0 rgba(255,255,255,0.3),

        inset 0 -10px 10px rgba(255,255,255,0.1);

    }


    <div id="mainContainer">

        <div id="login" class="loginForm">

            <div class="login-top">

            </div>

            <form class="login-fields" onsubmit="alert('test'); return false;">

                <div id="login-email" class="login-field">

                    <label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>

                    <span><input name="email" id="email" type="text"></input></span>

                </div>

                <div class="spacer"></div>

                <div id="login-password" class="login-field">

                    <label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>

                    <span><input name="password" id="password" type="password"></input></span>

                </div>

                <div class="login-bottom">

                    <input type="checkbox" name="remember" id="login-remember"></input>

                    <label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>

                    <input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in"></input>

                </div>

            </form>

        </div>

    </div>

Answer 1

使用CSS定义box-sizing:border-box可防止填充影响元素的宽度或高度。请参阅的文档box-sizing。您可能还需要检查（IE8 +）的浏览器兼容性box-sizing。

border-box
：width和height属性包括padding和border，但不包括margin…。请注意padding和border将在盒子内部。

input[type=text],
input[type=password] {
    box-sizing : border-box;
}

编辑：在进行此编辑时，不需要前缀box-sizing。

#mainContainer {

  line-height: 20px;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  background-color: rgba(0, 50, 94, 0.2);

  margin: 20px auto;

  display: table;

  -moz-border-radius: 15px;

  border-style: solid;

  border-color: rgb(40, 40, 40);

  border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;

  border-radius: 2px;

  border-radius: 2px 5px / 5px;

  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);

}

.loginForm {

  width: 320px;

  height: 250px;

  padding: 10px 15px 25px 15px;

  overflow: hidden;

}

.login-fields > .login-bottom input#login-button_normal {

  float: right;

  padding: 2px 25px;

  cursor: pointer;

  margin-left: 10px;

}

.login-fields > .login-bottom input#login-remember {

  float: left;

  margin-right: 3px;

}

.spacer {

  padding-bottom: 10px;

}

input[type=text],

input[type=password] {

  width: 100%;

  height: 30px;

  padding: 5px 10px;

  background-color: rgb(215, 215, 215);

  line-height: 20px;

  font-size: 12px;

  color: rgb(136, 136, 136);

  border-radius: 2px 2px 2px 2px;

  border: 1px solid rgb(114, 114, 114);

  box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);

  box-sizing: border-box;

}

input[type=text]:hover,

input[type=password]:hover,

label:hover ~ input[type=text],

label:hover ~ input[type=password] {

  background: rgb(242, 242, 242);

  !important;

}

input[type=submit]:hover {

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1);

}

.login-top {

  height: auto;/*85px;*/

}

.login-bottom {

  padding: 35px 15px 0 0;

}


<div id="mainContainer">

  <div id="login" class="loginForm">

    <div class="login-top">

    </div>

    <form class="login-fields" onsubmit="alert('test'); return false;">

      <div id="login-email" class="login-field">

        <label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>

        <span><input name="email" id="email" type="text" /></span>

      </div>

      <div class="spacer"></div>

      <div id="login-password" class="login-field">

        <label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>

        <span><input name="password" id="password" type="password" /></span>

      </div>

      <div class="login-bottom">

        <input type="checkbox" name="remember" id="login-remember" />

        <label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>

        <input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in" />

      </div>

    </form>

  </div>

</div>

或者，不对<input>元素本身添加填充，而是对<span>包装输入的元素进行样式设置。这样，<input>可以将元素设置为width:100%，而不受任何其他填充的影响。下面的例子：

#login-form {

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  background-color: rgba(0, 50, 94, 0.2);

  margin: 20px auto;

  padding: 10px 15px 25px 15px;

  border: 4px solid rgb(40, 40, 40);

  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);

  border-radius: 2px;

  width: 320px;

}

label span {

  display: block;

  padding: .3em 1em;

  background-color: rgb(215, 215, 215);

  border-radius: .25em;

  border: 1px solid rgb(114, 114, 114);

  box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);

  margin: 0 0 1em;

}

label span:hover {

  background: rgb(242, 242, 242);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1);

}

input[type=text],

input[type=password] {

  background: none;

  border: none;

  width: 100%;

  height: 2em;

  line-height: 2em;

  font-size: 12px;

  color: rgb(136, 136, 136);

  outline: none;

}

.login-bottom {

  margin: 2em 1em 0 0;

}

input#login-button {

  float: right;

  padding: 2px 25px;

}

input#login-remember {

  float: left;

  margin-right: 3px;

}


<form id="login-form">

  <label>E-mail address

    <span><input name="email" type="text" /></span>

  </label>

  <label>Password

    <span><input name="password" type="password" /></span>

  </label>

  <div class="login-bottom">

    <label>

      <input type="checkbox" name="remember" id="login-remember" />Remember my email

    </label>

    <input type="submit" name="login-button" id="login-button" value="Log in" />

  </div>

</form>