Question

I have two textboxes that I want to even out. By even out, I mean this:

[text] --> < input type="text" / >

[More more text] --> < input type="text" / >

I want the two “inputs” to be inline with each other. How do I move the first input text box to match the position of the second one which is pushed further due to the “more more text”.

Answer 1

The two bits of text are labels for the input fields, right?

You can enclose them in a <label> tag, like so:

<label for='field1'>Some text</label><input type='text' id='field1' /><br />
<label for='field2'>Some more text</label><input type='text' id='field2' /><br />

Then use CSS styles to fix them to a set width, like so:

label {
    display:inline-block;
    width:50px;
}

This should make your input fields line up.

There’s a whole bunch of other ways to do it, but I’ll leave you with that one.

Hope that helps.