CSS表单对齐问题

Question

我无法按下，保证金和顶部似乎无法正常工作。并调整我的形式。我希望表单（标签 - ＆gt;输入框）位于作为背景的登录文本之下。

我目前有：

HTML：

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

</div>

CSS：

    .column-right-login{
    background:url('../image/login.png') no-repeat;
    width:335px;
    height:154px;
}

示例：

更新

我现在有了下面的代码，但我无法将表单对齐：

HTML：

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

</div>

CSS：

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

示例：

Answer 1

您可能想要使用填充：

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

请注意填充会增加高度/宽度，因此您必须调整它们（从用于填充的px的当前值编号中抽象，例如在我的示例中，宽度= 335 - 50，高度= 154 - 80 ）

如果您想在表单上使用保证金并且无效，请添加

  display: block;

表单的css。我不记得它是否违约 - 凌晨4点：）

更新：

将您的输入放在您想要的位置，我建议将标签和输入包装到div中。然后您可以使用保证金调整头寸。

   <div style="margin-left: 40px;"><label1 ...><input ...></div>
   <div><label2 ...><input ...></div>

当然把样式放到CSS :)希望这对你有用。

Answer 2

很难说，但您的background-image似乎需要定位。

尝试将这样的内容添加到您的css中：

.column-right-login{
    background:url('../image/login.png') no-repeat;
    background-position: 0% 20%;  //HERE
    width:335px;
    height:154px;
}

这样可以将图像保持在左侧 - 前0％ - 并将其降低20％。

显然，你可以调整数字。