firstRow与secondRow容器输入框和其他输入框对齐异常求助

你的输入框对齐问题源于三个核心问题：

1. 内联样式（float:right、width:47%）破坏了flex布局的自动分配规则
2. 未统一设置box-sizing，导致输入框宽度计算未包含边框和内边距，超出容器
3. flex容器内的输入框缺少间距控制，与下方100%宽度输入框的边界不对齐

下面是具体修复方案：

步骤1：清除干扰性内联样式 #

删掉HTML中firstRow内第二个输入框的style="float:right"，以及secondRow内电话输入框的style="width:47%"，避免内联样式覆盖CSS规则。

步骤2：统一全局盒模型 #

给所有输入框添加box-sizing: border-box，确保宽度计算包含边框和内边距，避免超出容器：

input {
  box-sizing: border-box;
}

步骤3：调整flex布局的间距与对齐 #

修改.firstRow和.secondRow的样式，添加输入框间距并统一底部边距，确保和下方输入框视觉一致：

.firstRow,
.secondRow {
  display: flex;
  gap: 10px; /* 两个输入框之间的间距 */
  margin-bottom: 10px; /* 和下方输入框保持一致的底部间距 */
}

.firstRow input,
.secondRow input {
  height: 50px;
  flex: 1; /* 平分容器宽度 */
  padding: 0 15px; /* 添加内边距，和其他输入框保持视觉统一 */
}

步骤4：统一其他输入框的内边距 #

调整.other容器内的输入框样式，添加相同内边距，保证所有输入框视觉一致：

.other input:not(#check) {
  margin-bottom: 10px;
  height: 50px;
  padding: 0 15px; /* 统一内边距 */
}

修改后的完整CSS代码 #

/* 统一盒模型 */
input {
  box-sizing: border-box;
}

header {
  text-align: center;
  margin-top: 100px;
  margin-bottom: 50px;
}

.container {
  width: 550px;
  height: 700px;
  margin: auto;
  text-align: center;
}

form:not(#check) {
  padding: 50px;
  margin: auto;
  border: 1px solid rgb(243, 240, 240);
  border-radius: 20px;
  text-align: center;
  background-color: rgba(225, 208, 199, 0.804);
}

.other input {
  display: block;
  width: 100%;
}

.other input:not(#check) {
  margin-bottom: 10px;
  height: 50px;
  padding: 0 15px; /* 统一内边距 */
}

.firstRow,
.secondRow {
  display: flex;
  gap: 10px; /* 添加输入框间距 */
  margin-bottom: 10px; /* 统一底部间距 */
}

.firstRow input,
.secondRow input {
  height: 50px;
  flex: 1; /* 平分宽度 */
  padding: 0 15px; /* 统一内边距 */
}

button {
  width: 100%;
  height: 50px;
  background-color: rgb(97, 69, 53);
  border-radius: 20px;
}

.box {
  display: flex;
  margin: auto;
  align-items: center; /* 垂直对齐复选框和文字 */
  gap: 8px;
}

#check {
  float: none; /* 清除不必要的float */
}

修改后的完整HTML代码 #

<header>
  <img src="" alt="logo">
  <p style="color: rgb(6, 6, 6); font-weight: bold; font-size: 40px">Welcome to <span style="color:rgb(97, 69, 53);">BUDGE IT! </span></p>
  <p style="font-size: 30px; font-weight: bold;">SIGN UP to join us </p>
</header>
<div class="container">
  <form action="" method="post">
    <div class="firstRow">
      <input type="text" name="nom" placeholder="First Name">
      <input type="text" name="prenom" placeholder="Last Name">
    </div>
    <div class="secondRow">
      <input type="tel" name="tel" placeholder="Telephone">
      <input type="text" list="choice" placeholder="Gender">
      <datalist id="choice">
        <option value="Male"></option>
        <option value="Female"></option>
      </datalist>
    </div>

    <div class="other">
      <input type="email" name="email" placeholder="Email">
      <input type="password" name="pass" placeholder="Password">
      <input type="password" name="passw" placeholder="Confirm password">
    </div>
    <div class="box">
      <input type="checkbox" name="check" value="1" id="check">
      <p style="color:rgb(97, 69, 53); font-size:17px; font-weight: bold;">I accept the Terms of Use & Privacy Policy
      </p>
    </div>
    <p><button type="submit" name="but"><span style="color:white; font-size: 20px; font-weight: bold;">Sign
                        Up</span></button></p>
    <br>
    <hr style="font-weight: bold;">
    <p style="font-weight: bold; color: rgb(97, 69, 53); text-decoration: none; font-size: 20px; ">Already have an account? </p>
    <button style="border-color:rgb(97, 69, 53);background-color: white;"><span
                    style="color:rgb(97, 69, 53); font-size: 20px; font-weight: bold;">Log in</span></button>
  </form>
</div>

<footer style="height: 40px;">
  <p style="border: 1px solid rgb(245, 241, 241) ; background-color: rgb(245, 241, 241); height: 40px; text-align: right;">
    Copyright @EHTP/1GI-2023</p>
</footer>

修改后，firstRow和secondRow内的输入框会平分容器宽度，中间保留10px间距，左右边缘与下方other容器的100%宽度输入框完全对齐，同时所有输入框的内边距、高度保持一致，视觉风格统一。

内容的提问来源于stack exchange，提问作者hoover