Entrées d'alignement de formulaire

Question

Je rencontre un problème avec l'alignement de la zone de saisie de mon mot de passe afin de l'aligner avec la zone de saisie de l'adresse e-mail?

**CSS:** 
.column-right-login{ 
    background:url('../image/login.png') no-repeat; 
    width:335px; 
    height:154px; 
    padding: 30px 0px 0px 10px; /* top right bottom left */ 
} 

.column-right-login input{ 
    margin-left:15px; 
} 

.column-right-login a{ 
    color:#fff; 
} 

HTML:

<div class="column-right-login"> 
      <form action="http://www.thetradinghouse.co.nz/login" method="post" enctype="multipart/form-data" id="homeLogin"> 
      <div><label for="email">Email Address: </label> <input type="text" name="email" value="" /></div> 
      <div><label for="password">Password: </label> <input type="password" name="password" value="" /></div> 
       <a href="http://www.thetradinghouse.co.nz/forgot-password">Forgotten Password</a> 
       <a onclick="$('#homeLogin').submit();" class="button"><span>Login</span></a> 
      </form> 
    <script type="text/javascript"><!-- 
    $('#homeLogin input').keydown(function(e) { 
     if (e.keyCode == 13) { 
      $('#homeLogin').submit(); 
     } 
    }); 
    //--></script> 

</div> 

Answer 1

Cela fonctionne, mais je vous suggère d'aller lire cet article:

http://www.alistapart.com/articles/prettyaccessibleforms

.column-right-login{ 
    background:url('../image/login.png') no-repeat; 
    width:335px; 
    height:154px; 
    padding: 30px 0px 0px 10px; /* top right bottom left */ 
} 

form label { 
    float:left; 
    width:100px 
} 

.column-right-login input { 
    margin-left:15px; 
    float:left; 
} 

form div { 
    clear:both;  
} 

.column-right-login a { 
    color:#fff; 
} 

Answer 2

Ceci est juste une idée:

.column-right-login label{ 
    width:150px; 
    display:-moz-inline-stack; /*Firefox 2 hack: must come before other declarations*/ 
    display:inline-block; 
    _height:50px; /*IE 6 Hack*/ 
    /*IE 7 Hacks*/ 
    zoom:1; 
    *display:inline; 
} 

échantillons

: http://jsfiddle.net/aTuFq/2/

Ressources: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/