how to align two textfields?

Question

I have an HTML code as follows

<body>
    Hello UserName:<input tyep="text"/><br/>
    Pass:<input type="text"/>
</body>

I want the two text fields should be aligned in such a way that their left borders should start from the same positions of two lines.Because as it is if I runs the two text fields starts exactly after their labels ends, which I don't want as it looks odd. How would I do that?

madhead · Accepted Answer · 2013-09-17T23:29:35.663

Take a look at this example with Chrome Developer Tools or Firebug.

HTML:

<div class="main">
    <div class="field">
        <label for="n">Name</label>
        <input type="text" name="n" />
    </div>
    <div class="field">
        <label for="ln">Surnemt</label>
        <input type="text" name="ln" />
    </div>
    <div class="field">
        <label for="a">Bithplace</label>
        <input type="text" name="a" />
    </div>
</div>

CSS:

body {font-size:14px;}
label {float:left; padding-right:10px;}
.field {clear:both; text-align:right; line-height:25px;}
.main {float:left;}

how to align two textfields?

1 Answers1