Входы выравнивания формы - PullRequest
0 голосов
/ 19 августа 2011

У меня проблема с выравниванием поля ввода моего пароля, чтобы оно совпадало с полем ввода адреса электронной почты, есть идеи?

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

Ответы [ 2 ]

2 голосов
/ 19 августа 2011

Это всего лишь одна идея:

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

1 голос
/ 19 августа 2011

Это работает, но я предлагаю вам прочитать эту статью:

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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...