我想下面的代码就是你想要显示的。这段代码不是最好的解决方案，但它是我能想到的最简单的解决方案。

.DataContent {
  width: 100%;
  /* form width */
  line-height: 25px;
}

.DataTitle {
  float: left;
  padding: 0 10px;
  /* label left and right space */
  /*margin-right: 10px;*/
  /* The space between label and textbox */
}

.DataItem {
  float: left;
}

.LabelAlign {
  text-align: right;
}

<div class="DataContent">
  <!-- Col1 -->
  <div class="DataTitle">
    <div class="LabelAlign">
      <label for="FirstName">First Name：</label><br>
      <label for="City">City：</label><br>
    </div>
  </div>
  <div class="DataItem">
    <input type="text" id="FirstName"><br>
    <input type="text" id="City"><br>
  </div>
  <!-- Col2 -->
  <div class="DataTitle">
    <div class="LabelAlign">
      <label for="MI">MI：</label><br>
      <label for="State">State：</label><br>
    </div>
  </div>
  <div class="DataItem">
    <input type="text" id="MI"><br>
    <input type="text" id="State"><br>
  </div>
  <!-- Col3 -->
  <div class="DataTitle">
    <div class="LabelAlign">
      <label for="LastName">Last Name：</label><br>
      <label for="ZipCode">Zip Code：</label><br>
    </div>
  </div>
  <div class="DataItem">
    <input type="text" id="LastName"><br>
    <input type="text" id="ZipCode"><br>
  </div>
</div>

这里您犯的错误是，您没有将标签和输入字段 Package 在单个div或父标记中。你的代码应该是这样的：

.registerForm{
display:flex;
gap:10px;

}
.alignLabel{
display:flex;
flex-direction:column;
align-items:end;
gap:10px;

}
.alignField{
display:flex;
flex-direction:column;
align-items:center;
gap:10px
}

<form class="registerForm" method="POST" action="">
  
  
<div class="alignLabel">
    <label for="FirstName">First Name：</label>
<label for="LastName">Last Name：</label>
<label for="City">City：</label>
 <label for="MI">MI：</label>
 <label for="State" class="label">State：</label>
<label for="ZipCode">Zip Code：</label>
    
    </div>
  
<div class="alignField">
  <input type="text" id="FirstName">
 <input type="text" id="LastName">
 <input type="text" id="City">
<input type="text" id="MI">
<input type="text" id="State">  
 <input type="text" id="ZipCode">
</div>

</form>

你可以使用CSS网格来对齐它们。玩左右的长度，以获得您想要的对齐！（给予适当的长度值给grid-template-columns）

.wrapper {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 80px 150px 40px 150px 80px 150px;
}

<h1>Please fill this survey form</h1>
<form action="#" method="#">
  <div class="wrapper">
    <label for="fname">First Name: </label>
    <input type="text" name="firstName" id="fname">
    <label for="mi">MI: </label>
    <input type="number" name="mi" id="mi" min="0" max="50">
    <label for="lname">Last Name: </label>
    <input type="text" name="lastName" id="lname">
    <label for="city">City: </label>
    <input type="text" name="city" id="city">
    <label for="state">State: </label>
    <input type="text" name="state" id="state">
    <label for="zcode">Zip Code: </label>
    <input type="text" name="zipcode" id="zcode">
  </div>
</form>

谢谢你回答我的胡言乱语的问题。有人教我解决这个问题的最简单的方法。长话短说，我根本不需要使用CSS，而是使用一个表。这里是代码。

<table>
    <tr>
        <th colspan="6"><h1>Please Fill This Survery Form</h1></th>
    </tr>
    <tr>
        <td><label for="fname">First Name:</label></td>
        <td><input type="text" name="firstName" id="fname"></td>
        <td><label for="mi">MI:</label></td>
        <td><input type="text" name="mi" id="mi" size="3"></td>
        <td><label for="lname">Last Name:</label></td>
        <td><input type="text" name="lastName" id="lname"></td>
    </tr>
    <tr>
        <td><label for="city">City:</label></td>
        <td><input type="text" name="city" id="city"></td>
        <td><label for="state">State:</label></td>
        <td><input type="text" name="state" id="state"></td>
        <td><label for="zip">ZipCode:</label></td>
        <td><input type="text" name="zipCode" id="zip"></td>
    </tr>
</table>