甚至大小的输入框彼此排列，而不是文本的开头

I have the following html code that is inside the body tag and with the css styles applied. I want to have the text boxes all line up with each other so it looks nice and even. However, I was only able to get them to be even sized so that the heading is above them, whereas I'd like them inlined. Something like (Excuse my paint skills, also I forgot to make the box lines thin that isn't something I want it to look like):

我有以下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>

How can I do this?

我怎样才能做到这一点？

Without any css styling it will look like this, which is what I don't want:

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

4 个解决方案

#1

The most flexible way will be to make use of a CSS table. Over the other solutions provided, this does not ask you to define a width for the label (which you might not know beforehand in a dynamic world).

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

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

#2

Not sure what technique you're wanting to use... Here's what I whipped up:

不确定你想要使用什么技术......这就是我掀起的：

.FormContainer {
  max-width: 500px;
  text-align: center;
  clear: both;
}
.FormContainer label {
  display: inline-block;
  text-align: left;
  width: 100%;
  max-width: 120px;
}
.FormContainer input:not([type="submit"]){
  display: inline-block;
  width: 100%;
  max-width: 250px;
  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>

#3

Here's the third option I originally provided - you set a fixed width for the label (and the same value for the <p> "padding-left" property: https://jsfiddle.net/p8zmhhwr/2/

这是我最初提供的第三个选项 - 为标签设置固定宽度（和

“padding-left”属性的相同值：https：//jsfiddle.net/p8zmhhwr/2/

.FormContainer {
  width: 500px;
}
.FormContainer p {
  position: relative;
  padding-left: 120px;
}
.FormContainer p:after {
  content: '';
  display: table;
  clear: both;
}
.FormContainer input,
.FormContainer label {
  display: inline-block;
  float: left;
  box-sizing: border-box;
}
.FormContainer input {
  width: 100%;
}
.FormContainer label {
  position: absolute;
  left: 0;
}

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

The original 50/50% solution: https://jsfiddle.net/p8zmhhwr/, and the revised 70/30% solution: https://jsfiddle.net/p8zmhhwr/1/

最初的50/50％解决方案：https：//jsfiddle.net/p8zmhhwr/，以及修订后的70/30％解决方案：https：//jsfiddle.net/p8zmhhwr/1/

#4

-1

a table would be one possibility...

一张桌子是一种可能性......

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

...see this question for other possibilities.

...看其他可能性的问题。

#1