html - CSS 输入元素宽度超出容器

Question

为什么电子邮件和密码的宽度超出了 input-container 的宽度？

  form {
    background: #ccc;
  }
  .input-container {
    background: red;
    width: 469px;
    margin: 0 auto;
  }
  .usermail,
  .userpword {
    margin-top: 10px;
  }
  input,
  button {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #cacece;
    padding: 10px 12px;
    font-size: 1em;
  }
  .username input {
    width: 206px;
  }

<form action='' method='post' id='signupform'>
  <div class='input-container'>
    <div class='username'>
      <input type='text' name='fname' id='fname' placeholder='First Name'>
      <input type='text' name='lname' id='lname' placeholder='Last Name'>
    </div>
    <div class='usermail'>
      <input type='email' name='email' id='email' placeholder='Email'>
    </div>
    <div class='userpword'>
      <input type='password' name='pword' id='pword' placeholder='Password'>
    </div>
    <button>Sign Up</button>
  </div>
</form>

Answer 1

那是因为你设置了填充。它会将元素宽度的值与填充集相加。

为避免这种行为，建议添加属性box-sizing: border-box

例子:

#element{
    box-sizing: border-box;}

或者更好:

*{
    box-sizing: border-box;}