html - 将同一行“First Name”和“Last Name”上的两个输入列与其错误消息和标签对齐

Question

我已经尝试了五天来对齐两个输入字段，它们的标签和错误消息在同一行（名字和姓氏）但是在搜索堆栈并尝试其他用例之后，它们没有工作。我想我会发布我目前拥有的代码，看看是否有人能够就需要修复的内容提出建议，以允许我的输入字段对齐。我试过 CSS 网格但没有成功。代码在“全名”div 中，但我包含了可能影响我的设置的周围代码。

#fullname {
  display: flex;
  flex-direction: row;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 100%;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-areas: 'firstLabel' 'firstError' 'lastLabel' 'lastError' 'fname' 'fname' 'lname' 'lname'
}

#firstLabel {
  display: grid;
  grid-area: firstlabel;
}

#firstError {
  display: grid;
  grid-area: firstError;
}

#lastLabel {
  display: grid;
  grid-area: lastLabel;
}

#lastError {
  display: grid;
  grid-area: lastError;
}

#fname {
  display: grid;
  grid-area: fname;
  max-width: 100px;
}

#lname {
  display: grid;
  grid-area: lname;
  max-width: 100px;
}


/*Register Button div*/

#register_button {
  text-align: center;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  padding: 15px;
  width: 50%;
}


/*Register Form div*/

#register_form {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  border-radius: 5px;
  padding: 15px;
  width: 50%;
}

#register {
  font-family: Rajdhani, sans-serif;
  font-size: 14px;
  font-weight: bolder;
  width: 50%;
  background-color: #000;
  color: white;
  padding: 15px 20px;
  margin: 10px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=text],
input[type=date],
select {
  font-family: Rajdhani, sans-serif;
  font-size: 16px;
  width: 50%;
  padding: 5px 20px;
  margin: 10px 25%;
  display: block;
  border: 1px solid #ccc;
  border-radius: 15px;
  box-sizing: border-box;
}

<div id="register_form" class="Hidden">
  <form id="reg_input" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']) ?>" method="POST">

    <!-- Required Fields -->
    <span class="Error">* All fields are required</span>
    <br><br>

    <div id="fullname">
      <!-- First Name -->
      <label id="firstLabel" for="fname">First Name</label>
      <span id="firstError" class="Error">* <?php echo $fnameErr;?></span>
      <br>
      <label id="lastLabel" for="lname">Last Name</label>
      <span id="lastError" class="Error">* <?php echo $lnameErr;?></span>
      <br>
      <input type="text" id="fname" name="firstname" placeholder="e.g. Reggie" />
      <input type="text" id="lname" name="lastname" placeholder="e.g. Rocket" />
    </div>

    <!-- Email -->
    <label for="email">Email</label>
    <span class="Error">* <?php echo $emailErr;?></span>
    <br>
    <input type="text" id="email" name="Email" placeholder="[e-mail] " />


    <!-- Date of Birth -->
    <label for="dateOfBirth">Date of Birth</label>
    <span class="Error">* <?php echo $dateOfBirthErr;?></span>
    <br>
    <input type="date" id="dateOfBirth" name="dateOfBirth" value="<?php echo date('Y-m-d'); ?>" />

    <!-- Nation of Origin -->
    <label for="nationOfOrigin">Nation of Origin</label>
    <span class="Error">* <?php echo $nationOfOriginErr;?></span>
    <br>
    <select id="nationOfOrigin" name="nationOfOrigin">
      <option value="">--Select--</option>
      <option value="AF">Afghanistan</option>
    </select>

    <!-- Submit Button -->
    <input type="submit" value="Submit" id="submitButton" name="submitButton">

  </form>
</div>

我很感激我能得到的任何帮助！

标签： htmlcssinput

Answer 1

对您的代码进行了一些调整，这就是我想出的

#fullname {
  display: grid;
  grid-template-columns: auto auto;
}
#fullname > div {
  padding: 0 2px;
}

/*Register Button div*/

#register_button {
  text-align: center;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  padding: 15px;
  width: 50%;
}

/*Register Form div*/

#register_form {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  border-radius: 5px;
  padding: 15px;
  width: 50%;
}

#register {
  font-family: Rajdhani, sans-serif;
  font-size: 14px;
  font-weight: bolder;
  width: 50%;
  background-color: #000;
  color: white;
  padding: 15px 20px;
  margin: 10px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="text"],
input[type="date"],
select {
  font-family: Rajdhani, sans-serif;
  font-size: 16px;
  width: 100%;
  padding: 5px 20px;
  margin: 10px;
  display: block;
  border: 1px solid #ccc;
  border-radius: 15px;
  box-sizing: border-box;
}

<div id="register_form" class="Hidden">
  <form id="reg_input" action="<?php echo 
 htmlspecialchars($_SERVER['PHP_SELF']) ?>" method="POST">

    <!-- Required Fields -->
    <span class="Error">* All fields are required</span>
    <br><br>

    <div id="fullname">
      <!-- First Name -->
      <div>
        <label id="firstLabel1" for="fname">First Name</label>
        <span id="firstError1" class="Error">* <?php echo $fnameErr;?></span>
        <input type="text" id="fname" name="firstname" placeholder="e.g. Reggie" />
      </div>

      <!-- Last Name -->
      <div>
        <label id="lastLabel1" for="lname">Last Name</label>
        <span id="lastError1" class="Error">* <?php echo $lnameErr;?></span>
        <input type="text" id="lname" name="lastname" placeholder="e.g. Rocket" />
      </div>
    </div>

    <!-- Email -->
    <label for="email">Email</label>
    <span class="Error">* <?php echo $emailErr;?></span>
    <br>
    <input type="text" id="email" name="Email" placeholder="[e-mail] " />

    <!-- Date of Birth -->
    <label for="dateOfBirth">Date of Birth</label>
    <span class="Error">* <?php echo $dateOfBirthErr;?></span>
    <br>
    <input type="date" id="dateOfBirth" name="dateOfBirth" value="<?php echo date('Y-m-d'); ?>" />

    <!-- Nation of Origin -->
    <label for="nationOfOrigin">Nation of Origin</label>
    <span class="Error">* <?php echo $nationOfOriginErr;?></span>
    <br>
    <select id="nationOfOrigin" name="nationOfOrigin">
      <option value="">--Select--</option>
      <option value="AF">Afghanistan</option>
    </select>

    <!-- Submit Button -->
    <input type="submit" value="Submit" id="submitButton" name="submitButton">

此链接到 CodePen。解决方案