CODEWITHSUNDEEP
htmlcssxhtml
Lion King
Lion King

Reputation: 33813

Why the input text and password fields are not line up?

First: you must see the following picture.

enter image description here
As you see, the red rectangle, the two fields does not line up, there is a little space in the start of the top field, while the next field does not.
Note: this problem occurs in all browsers.

HTML

<body>
   <br /><br /><br /><br /><br />
   <div id="loginForm">
      <form action="login.php" method="post">
         <label> Username: <input type="text" name="username" id="username" /></label><br />
         <label> Password: <input type="password" name="password" id="password" /></label><br /><br />
         <input type="submit" name="sbmtLogin" value="login" />
      </form>
   </div>     
</body>

CSS

body {margin:0; padding:0;}
div#loginForm {width:270px; max-width:270px; margin:0 auto; padding:10px; text-align:center; background-color:#8de3fd;}
div#loginForm input {margin:3px; padding:5px; color:#5b5b5b; width:150px; border:1px solid #9a9a9a;}
div#loginForm input[type=submit] {width:70px;}

How can I fix that problem ?

Upvotes: 0

Views: 1772

Answers (4)

ZubaiR
ZubaiR

Reputation: 605

Not all characters of the font has the same width for all fonts. In your case Username is slightly larger than the Password, therefore the alignment issue.

To fix the issue you need to put the labels in a fixed with box

HTML - wrapped each input element in a div

<body>
<br /><br /><br /><br /><br />
<div id="loginForm">
<form action="login.php" method="post">
    <div><label>Username:</label><input type="text" name="username" id="username" /></div>
    <div><label>Password:</label><input type="password" name="password" id="password" /></div>
    <div><input type="submit" name="sbmtLogin" value="login" /></div>
</form>
</div>
</body>

CSS - set width of label and set display to inline-block

    body {margin:0; padding:0;}
    div#loginForm {width:270px; max-width:270px; margin:0 auto; padding:10px; text-align:center; background-color:#8de3fd;}
    div#loginForm input {margin:3px; padding:5px; color:#5b5b5b; width:150px; border:1px solid #9a9a9a;}
    div#loginForm input[type=submit] {width:70px;}
    #loginForm label { width: 100px; display: inline-block; }

Upvotes: 0

davnicwil
davnicwil

Reputation: 30957

It's because the text of Username: is a few pixels longer than Password: ?

You need to close the label tags, so the text is actually in the label (setting the for attribute will also make the inputs selectable by clicking the label)

<body>
  <br /><br /><br /><br /><br />
  <div id="loginForm">
    <form action="login.php" method="post">
     <label for="username"> Username:</label> <input type="text" name="username" id="username" /></label><br />
     <label for="password"> Password:</label> <input type="password" name="password" id="password" /></label>         <br /><br />
     <input type="submit" name="sbmtLogin" value="login" />
    </form>
  </div>     
</body>

Then put a common width on the labels with css

div#loginForm form label {
    display: inline-block;
    width: 200px; // whatever looks best
}

Upvotes: 0

Quentin
Quentin

Reputation: 943089

Why the input text and password fields are not line up?

Username and Password are different length words

How can I fix that problem ?

  • Use a monospace font
  • Wrap the words in an element that you set to display: inline-block; width: ??? where ??? is a fixed value.

That element could be the labels.

 <label for="username"> Username:</label> <input type="text" name="username" id="username" /></label><br />
 <label for="password"> Password:</label> <input type="password" name="password" id="password" /></label>

label {
    display: inline-block;
    width: 7em; /* adjust to taste */
}

Keep in mind that you will get different fonts on different systems, so give yourself some leeway with the width of the elements if you take the second approach.

Upvotes: 4

ElGavilan
ElGavilan

Reputation: 6894

"Username:" is slightly wider than "Password:"

That is why they are not aligned.

You want to do something like putting the fields in a table or defined width divs.

Upvotes: 0

Related Questions