html - 我无法创建有序表单

Question

我想创建一个注册表单，每行的顺序如下:

标签输入标签输入标签输入标签输入

我写了一些代码并设法得到正确的顺序 问题是标签和其中的文本在不同的行之间没有对齐，输入也是如此。

<div class="container" align="center">
  <div align="center">
    <h1> New patient </h1>
  </div>
  <br>
  <br>

  <form action="/action_page.php">


    <div class="input-group">
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your 
       name..">



      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last 
       name..">
    </div>



    <div class="input-group">
      <label class="label">Gender</label>

      <label class="radio-container m-r-45">Maschio
            <input type="radio" checked="checked" name="gender" required 
         value="M">
        <span class="checkmark"></span>
        </label>
      <label class="radio-container">Femmina
            <input type="radio" name="gender" required value="F">
            <span class="checkmark"></span>
        </label>


      <label class="label">Birthday</label>

      <input class="input--style-4 js-datepicker" type="text" name="birthday" required>

    </div>

    <div class="input-group">
      <label for="cf">Fiscal Code</label>
      <input type="text" id="cf" name="cf" placeholder="Fiscal Code..">




      <input type="button" value="Calculate">
    </div>



    <div class="input-group">
      <label for="fname">Via</label>
      <input type="text" id="fname" name="firstname" placeholder="Your 
       name..">



      <label for="lname">Civico</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last 
         name..">
    </div>

    <div class="input-group">
      <label for="fname">Citta</label>
      <input type="text" id="fname" name="firstname" placeholder="Your 
        name..">



      <label for="lname">CAP</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last 
        name..">
    </div>

    <div class="input-group">
      <label for="fname">Father's name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your  
        name..">




      <input type="submit" value="Add">
  </form>

  </div>

Answer 1

.left-align-field{
    display: inline-block;
    float: left;
    clear: left;
    width: 300px;
    text-align: left;
    padding: 5px;


}


.right-align-field{
  display: inline-block;
  float: left;
  padding: 5px;

}

<div class="container" align="center">
  <div align="center">
    <h1> New patient </h1>
  </div>
  <br>
  <br>

  <form action="/action_page.php">


    <div class="input-group">
    	<div class="left-align-field">
      		<label for="fname">First Name</label>
      		<input type="text" id="fname" name="firstname" placeholder="Your 
       name..">
    	</div>


    	<div class="right-align-field">
      		<label for="lname">Last Name</label>
      		<input type="text" id="lname" name="lastname" placeholder="Your last 
       name..">
     	</div>
    </div>



    <div class="input-group">
    
    	<div class="left-align-field">    
      		<label class="label">Gender</label>

      		<label class="radio-container m-r-45">Maschio
            <input type="radio" checked="checked" name="gender" required 
         value="M">
        	<span class="checkmark"></span>
            
        	</label>
      		<label class="radio-container">Femmina
            <input type="radio" name="gender" required value="F">
            <span class="checkmark"></span>
        	</label>
		</div>


    	<div class="right-align-field">
      		<label class="label">Birthday</label>

      		<input class="input--style-4 js-datepicker" type="text" name="birthday" required>
		</div>
    </div>



    <div class="input-group">
        <div class="left-align-field"> 
      		<label for="cf">Fiscal Code</label>
      		<input type="text" id="cf" name="cf" placeholder="Fiscal Code..">




      		<input type="button" value="Calculate">
      	</div>
    </div>



    <div class="input-group">
            <div class="left-align-field"> 
      <label for="fname">Via</label>
      <input type="text" id="fname" name="firstname" placeholder="Your 
       name..">
</div>

        <div class="right-align-field"> 


      <label for="lname">Civico</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last 
         name..">
    </div>

</div>

    <div class="input-group">
            <div class="left-align-field"> 
      <label for="fname">Citta</label>
      <input type="text" id="fname" name="firstname" placeholder="Your 
        name..">
</div>
        <div class="right-align-field"> 


      <label for="lname">CAP</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last 
        name..">
    </div>
<div>


    <div class="input-group">
            <div class="left-align-field"> 
      <label for="fname">Father's name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your  
        name..">
</div>

        <div class="right-align-field"> 

      <input type="submit" value="Add">
      </div>
  </form>

  </div>