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

这是因为默认情况下两个边框属性都不同.

使用box-sizing: content-box按钮或box-sizing: border-box输入元素.