How do you even out textboxes?

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

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

[开发者_StackOverflowMore 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".

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.

Use a table element:

<table>
  <tr>
    <td>Text</td>
    <td>Text box</td>
  </tr>
  <tr>
    <td>Even more text</td>
    <td>Text box</td>
  </tr>
</table>

Example