How to fit a number of inputs on one line in parent div?

I am trying to put 5 inputs on one line. Simple, I thought. I have a parent div which has some margin on the left and right. I've put inputs with 20% width inside (5 x 20 = 100%). But the last input goes to the bottom, without a reason? Does someone knows why and how to solve this?

<body style="background: orange;">
  <div style="margin-left:10px; margin-right:10px;">	
    <form>
      <input style="width: 20%; padding:0; margin:0;" type="text">
      <input style="width: 20%; padding:0; margin:0;" type="text">
      <input style="width: 20%; padding:0; margin:0;" type="text">
      <input style="width: 20%; padding:0; margin:0;" type="text">
      <input style="width: 20%; padding:0; margin:0;" type="text">
    </form>
  </div>
</body>

Solution

I suggest to do it with flexbox.

form {
  display: flex;
}

input {
  flex: 1;
  min-width: 0;
}

<form>
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
</form>

Why your example didn't work is because:

<input> is inline level, it also has default padding and borders set from browser default stylesheet.
There is also white space in between the input boxes, they will be rendered as well.

To fix it with your original approach, you can do:

form {
  font-size: 0; /* remove white space */
}

input {
  font-size: 16px; /* reset font size */
  width: 20%;
  box-sizing: border-box; /* make border and padding part of width and height */
}

<form>
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
</form>

You can also float the input boxes so white space won't get rendered.

form:after { /* clear floats */
  content: "";
  display: table;
  clear: both;
}

input {
  float: left;
  width: 20%;
  box-sizing: border-box;
}

<form>
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
</form>