How To Align Multiple Input Using Css

i'm trying to realize a simple login page and i need to align some input text: this is my css: body { background-image: url(image/bg.jpg); background-size: 100%; }

Solution 1:

Drop the width on the inputField class and change the display on the nameField and inputField classes from inline to inline-block.

jsFiddle example.

CSS:

.nameField{
    display:inline-block;
    width:80px;
    text-align: right;
    padding: 14px 10px 0 0;
    margin:0 0 7px 0;
}
.inputField{
    display:inline-block;
    width:130px;
    margin:0;
    margin:0 0 7px 0;
}​

Solution 2:

Change the display property for .nameField to inline-block.

Also, you don't need to use divs for everything. There is a perfectly good tag called label for labeling form fields.