html - 大小一致的输入框彼此对齐，而不是文本的开头

我有以下html代码，它们位于body标记内，并应用了CSS样式。我想让所有文本框彼此对齐，这样看起来不错甚至均匀。但是，我只能将它们的大小调整为使标题位于它们之上，而我希望将它们内联。诸如此类的东西（对不起，我的绘画技巧，我也忘记使方框线条变细，这不是我想要的样子）：

.FormContainer {
  width: 500px;
  clear: both;
}
.FormContainer input {
  width: 100%;
  clear: both;
}

<div class="FormContainer">
  <form id="LoginForm" name="LoginForm" method="post">
    <p>
      <label for="EmailAddressLoginField">Email Address:</label>
      <input type="text" name="EmailAddressLoginField" id="EmailAddressLoginField">
    </p>
    <p>
      <label for="PasswordLoginField">Password:</label>
      <input type="text" name="PasswordLoginField" id="PasswordLoginField">
    </p>
    <p>
      <input type="submit" name="LoginButton" id="LoginButton" value="Login">
    </p>
  </form>
</div>

我怎样才能做到这一点？

没有任何CSS样式，它将看起来像这样，这是我不想要的：

最佳答案

最灵活的方法是利用CSS表。在提供的其他解决方案上，这并不要求您定义label的宽度（在动态世界中您可能事先不知道）。

.FormContainer {
  width: 500px;
  clear: both;
}
.FormContainer input {
  width: 100%;
  clear: both;
}
.FormContainer form {
  display: table;
}
.FormContainer form p {
  display: table-row;
}
.FormContainer form p label,
.FormContainer form p input[type=text] {
  display: table-cell;
}
/* if the last paragraph in a form
always contains the submit button, add this: */

.FormContainer form p:last-child {
  display: block;
}

<div class="FormContainer">
  <form id="LoginForm" name="LoginForm" method="post">
    <p>
      <label for="EmailAddressLoginField">Email Address:</label>
      <input type="text" name="EmailAddressLoginField" id="EmailAddressLoginField">
    </p>
    <p>
      <label for="PasswordLoginField">Password:</label>
      <input type="text" name="PasswordLoginField" id="PasswordLoginField">
    </p>
    <p>
      <input type="submit" name="LoginButton" id="LoginButton" value="Login">
    </p>
  </form>
</div>

关于html - 大小一致的输入框彼此对齐，而不是文本的开头，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41572445/