CODEWITHSUNDEEP
htmlalignment
Chandra Sekhar
Chandra Sekhar

Reputation: 19500

how to align two textfields?

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?

Upvotes: 2

Views: 868

Answers (1)

madhead
madhead

Reputation: 33451

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;}

Upvotes: 3

Related Questions