html - Place input fields in a row to fit full container width -

html - Place input fields in a row to fit full container width -

i seek set 3 input fields in row, little bit of space next each other, doesnt odd. anyway 3rd input gets new line, why , how prepare it?

what want achieve, see picture.

html:

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

css:

#form{ width: 600px; border: 1px solid black; } #form input { width: 33.33%; display: inline-block; margin: 0 1.1% 0 0; padding: 0; }

reduce width percentage of inputs. percentages add together margin.

class="snippet-code-css lang-css prettyprint-override">#form { width: 600px; border: 1px solid black; } #form input { width: 31.63%; display: inline-block; margin: 0 1.1% 0 0; padding: 0; } #form input:last-child { margin-right: 0 } class="snippet-code-html lang-html prettyprint-override"><div id="form"> <form> <input type="text"> <input type="text"> <input type="text"> </form> </div>

or, if can back upwards flex layout, cleanest. margin not needed because justify-content: space-between handles spacing long input percentages allow (add < 100%).

class="snippet-code-css lang-css prettyprint-override">#form > form { width: 600px; border: 1px solid black; display: flex; justify-content: space-between; } #form input { width: 31%; } class="snippet-code-html lang-html prettyprint-override"><div id="form"> <form> <input type="text"> <input type="text"> <input type="text"> </form> </div>

html css