Arrange inputs into equal length

Question

I have multiple rows with inputs

<input type="text" style="width: 50px;">
<br>
<input type="text" style="width: 25px;">
<input type="text" style="width: 25px;">

Unfortunately the 25+25 != 50 because there is a space between, which varies by each browser.

Question: How to style the inputs to get 2x25 has equal lenth with 1x50

The space is just white space which you have in your code in the form of a new line https://jsfiddle.net/375g0z0x/3/ inputs have default styles and you need to reset them to make them "clean" — Huangism, Mar 08 '18 at 15:29
You can put the first input inside a div with a css width: 150px and change his style to width: 100% and for the others, put both in same div and changes their styles to width: 50% respectily. — Dariel Ramos Díaz de Villegas, Mar 08 '18 at 15:31
just as a note: don't use inline css - it's hard to manage and makes it harder for frameworks (like bootstrap) to apply the css (due to specificity) — treyBake, Mar 08 '18 at 15:32
an addition to @Dariel comment - use a container div with percentages on inpit for responsive design — treyBake, Mar 08 '18 at 15:32

score 5 · Accepted Answer · edited Mar 08 '18 at 18:37

5

Use box-sizing: border-box on all the input elements and make sure to avoid the white-spacing between the two elements. One way is to have both the inputs in the same line or the other (preferred and more readable) way is to add a comment in between the two.

.full {
  width: 50px;
  box-sizing: border-box;
}

.half {
  width: 25px;
  box-sizing: border-box;
}

<input type="text" class="full">
<br>
<input type="text" class="half"><!--
--><input type="text" class="half">

edited Mar 08 '18 at 18:37

VXp

11,598
6
31
46

answered Mar 08 '18 at 15:33

Rocks

1,145
9
13

Another way to have both inputs on the same line is using `float` ;) – Ron van der Heijden Mar 08 '18 at 15:39
@RonvanderHeijden use `display: inline-block` - float is too crazy to use haha – treyBake Mar 08 '18 at 15:56
@ThisGuyHasTwoThumbs If you think float is crazy, you didn't understand float. Using inline elements and comments to fix the whitespaces is unpredictable when using dynamic content. – Ron van der Heijden Mar 08 '18 at 16:04
@RonvanderHeijden it's behaviour is unpredicatable sometimes, that's why people are more and more using display: inline-block in place of float, see here https://stackoverflow.com/questions/15172520/advantages-of-using-displayinline-block-vs-floatleft-in-css for some advantages :) – treyBake Mar 08 '18 at 16:25

Arrange inputs into equal length

1 Answers1