html - CSS 提交按钮和输入文本的宽度不同

Question

尽管我制作了提交按钮和输入文本:

width:60%

但是当我运行应用程序时，它们的宽度不同:

.loginClass {
  width: 40%;
  height: 40%;
  margin: auto auto;
}

.loginClass ul li {
  list-style: none;
}

.loginClass ul li input {
  width: 60%;
}

<form class="loginClass">
  <ul>
    <li>
      <input placeholder="Username" name="username" type="text" value="">
    </li>
    <li>
      <input placeholder="Username" name="username" type="text" value="">
    </li>
    <li>
      <input type="submit" value="Login">
    </li>
  </ul>

</form>

你能解释一下并帮忙吗？

Answer 1

那是因为两个 border-box 属性在默认情况下是不同的..

在按钮上使用 box-sizing: content-box，或在输入元素上使用 box-sizing: border-box。