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

这只是一个想法：

.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/

Answer 2

这有效，但我建议你去看看这篇文章：

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

表格对齐输入

2 个答案: