发现很难对齐登录界面

Question

我发现很难把界面集中起来，所以每个元素都是对齐的。我有‘电子邮件’，‘密码’和‘登录按钮’。我试图使用绝对定位，但当我移动输入字段时，它涵盖了“电子邮件”或“密码”这个词，我希望用户看到这些单词。该功能正在工作，与rails一起工作。

下面是我为和CSS编写的代码

​

h1 {
  text-align: center;
  margin-top: 350px;
  font-size: 45px;
}
.field {
  text-align: center;
}
#field {
  text-align: center;
  padding: 25px;
}
input {
  height: 35px;
  width: 200px;
  display: inline;
}
.actions {
  text-align: center;
}
h1 {
  font-family: 'Lobster', cursive;
}

<nav>
  <ul>
    <li>
      <a href="/campus">campus</a>
    </li>
    <li>
      <a href="/classrooms">classrooms</a>
    </li>
    <li>
      <a href="/courses">courses</a>
    </li>
    <li>
      <a href="/users">users</a>
    </li>
  </ul>
</nav>
<a href="/users/new">Sign Up</a> or
<a href="/sessions/new">Log In</a>
<h1>Log in</h1>
<form accept-charset="UTF-8" action="/sessions" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="✓">
    <input name="authenticity_token" type="hidden" value="ALrA11a6G5GZof0r/AMm82stLUUzaI+UTPEoB79yXrc=">
  </div>
  <div class="field">
    <label for="email">Email</label>
    <input id="email" name="email" type="text">
  </div>
  <div id="field">
    <label for="password">Password</label>
    <input id="password" name="password" type="password">
  </div>
  <div class="actions">
    <input name="commit" type="submit" value="Log in">
  </div>
</form>

​

Answer 1

我把第二个字段的id改为了一个类。它将使您的代码更易于维护。

html：

<form accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="ALrA11a6G5GZof0r/AMm82stLUUzaI+UTPEoB79yXrc="></div>
<div class="field">
  <label for="email">Email</label>
  <input id="email" name="email" type="text">
</div>
<div class="field">
  <label for="password">Password</label>
  <input id="password" name="password" type="password">
</div>

<div class="actions"><input name="commit" type="submit" value="Log in"></div>

​

css：

h1 {
    text-align: center;
    margin-top: 50px;
    font-size: 45px;
    font-family: 'Lobster', cursive;
}
input {
    height: 35px;
    width: 200px;
    display: inline;
}
.field {
    padding-bottom: 25px;
    width: 300px;
    margin: 0 auto;
}
.field label {
    display: inline-block;
    min-width: 70px;
    text-align: left;
}

.actions {
    text-align: center;
    margin: 0 auto;
    width: 300px;
}

下面是一个显示它在行动中的小提琴：http://jsfiddle.net/t9w757hj/