Html CSS表单对齐问题

我压下有困难，边缘和顶部似乎不起作用。调整我的姿势。我希望表单（标签->输入框）位于作为背景的登录文本下方

我目前有：

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>

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

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

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

例如：

更新：

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

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

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

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

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

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>

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

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

.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{
 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。我不记得它是否为默认值-4AM:）

更新：

为了将您的输入放在您想要的地方，我建议将标签和输入包装到div中。然后，您可以使用边距调整位置

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

---

当然，将样式添加到CSS:）希望这对您有用。

很难说，但看起来您的

背景图像需要定位

尝试将以下内容添加到css中：

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

这将使图像保持在左侧（前0%），并将其向下倾斜20%

显然，你可以调整数字。
一旦你开始工作，我建议你将工作代码发布到上，以获得关于提高代码质量的建议。@Matt我同意，这是OpenCarto中给定的代码亲爱的我，这种质量的示例代码
在密码标签出现之前，不会有一个

来做这个把戏吗？用标签代替标签更糟糕，我很慢improving@mmk，谢谢，效果很好，我在玩的时候试着填充表格而不是盒子，你能帮我调整表格吗？