CSS submit button and input text don't have the same width

Question

Though I made the submit button and the input text exactly:

width:60%

But when I run the app, they don't have the same width:

.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>

Could you please explain and help?

Answer 1

That's because both border-box attributes are different by default..

Use box-sizing: content-box on the button, or box-sizing: border-box on the Input Elements.