窗體對齊輸入

Question

我在對齊我的密碼輸入框時遇到問題，所以它與電子郵件地址輸入框對齊任何想法？

**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

這工作，但我建議你去看看這篇文章：

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

這只是一個想法：

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

樣本：http://jsfiddle.net/aTuFq/2/

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