CODEWITHSUNDEEP
htmlcssalignment
Jayyrus
Jayyrus

Reputation: 13051

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

    .content{
        border: 1px solid gray;
        margin-top:180px;
        margin-left:380px;
        background-color: #464749;
        width:333px;
        height: 352px;
        padding: 58px 76px 0 76px;
        color: #ebebeb;
        font: 12px Arial, Helvetica, sans-serif;
    }
    span{
        display:block;  
        margin-left: 30px;
    }
    input{
        width: 205px;
        padding: 10px 4px 6px 3px;
        border: 1px solid #0d2c52;
        background-color:#1e4f8a;
        font-size: 16px;
    }
    .nameField{

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

This is my html :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Login</title>
        <link rel="stylesheet" type="text/css" href="main.css" />
        <!-- Date: 2012-05-30 -->
    </head>
    <body>
        <div class="content">
            <h2>Login</h2>
            <span>
                <div class="nameField">
                Username: 
                </div>
                <div class="inputField">
                    <input type="text" name="username" size="30" maxlength="2048"/>
                </div>
            </span>
            <span><div class="nameField">
                Password: 
                </div>
                <div class="inputField"><input type="password" name="password" size="30" maxlength="2048"/>
                    </div>
            </span>
        </div>
    </body>
</html>

My output is:

enter image description here

How can i align that blue input text? can someone help me?? thanksssss

Upvotes: 1

Views: 5799

Answers (2)

j08691
j08691

Reputation: 207901

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

Upvotes: 4

jeffjenx
jeffjenx

Reputation: 17457

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.

Upvotes: 1

Related Questions