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

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

全名{ 显示器：flex； 弯曲方向：行； 显示：网格； 网格间距：5px； 网格模板列：100%； 网格模板行：25%25%25%25%； 网格模板区域：“firstLabel”“firstError”“lastLabel”“lastError”“fname”“fname”“lname”“lname” } 第一标签{ 显示：网格； 网格区域：第一个标签； } 第一错误{ 显示：网格； 网格区域：firstError； } 最后标签{ 显示：网格； 网格区域：lastLabel； } 最后错误{ 显示：网格； 网格区域：lastError； } fname{ 显示：网格； 网格区域：fname； 最大宽度：100px； } 名字{ 显示：网格； 网格区域：lname； 最大宽度：100px； } /*寄存器按钮div*/ 注册按钮{ 文本对齐：居中； 边缘顶部：20px； 左边距：自动； 右边距：自动； 边界半径：5px； 填充：15px； 宽度：50%； } /*登记表格组*/ 登记表{ 文本对齐：居中； 左边距：自动； 右边距：自动； 边缘顶部：20px； 边界半径：5px； 填充：15px； 宽度：50%； } 登记册{ 字体系列：Rajdhani，无衬线； 字体大小：14px； 字体大小：粗体； 宽度：50%； 背景色：000； 颜色：白色； 填充：15px 20px； 利润率：10px0； 边界：无； 边界半径：4px； 光标：指针； } 输入[类型=文本]， 输入[类型=日期]， 挑选{ 字体系列：Rajdhani，无衬线； 字体大小：16px； 宽度：50%； 填充：5px20px； 利润率：10px25%； 显示：块； 边框：1px实心ccc； 边界半径：15px； 框大小：边框框； }

---

为什么不直接使用引导网格系统呢

这样就可以拥有一个容器并轻松地将其分解：

<div class="container">
  <div class="col-md-6>
    <input type="text" id="fname" name="firstname" placeholder="e.g. Reggie"/>
  </div>
  <div class="col-md-6">
    <input type="text" id="lname" name="lastname" placeholder="e.g. Rocket"/>
  </div>
</div>

通过这种方式，你可以很容易地排列和组织你所有的领域，而且对于那些使用手机或平板电脑的人来说，它也会反应灵敏

编辑：

你可以试试这个。在两个单独的分区中分别设置第一个和最后一个分区：

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

---

对你的代码做了一些调整，下面是我的想法

全名{ 显示：网格； 网格模板列：自动； } 全名>div{ 填充：0.2px； } /*寄存器按钮div*/ 注册按钮{ 文本对齐：居中； 边缘顶部：20px； 左边距：自动； 右边距：自动； 边界半径：5px； 填充：15px； 宽度：50%； } /*登记表格组*/ 登记表{ 文本对齐：居中； 左边距：自动； 右边距：自动； 边缘顶部：20px； 边界半径：5px； 填充：15px； 宽度：50%； } 登记册{ 字体系列：Rajdhani，无衬线； 字体大小：14px； 字体大小：粗体； 宽度：50%； 背景色：000； 颜色：白色； 填充：15px 20px； 利润率：10px0； 边界：无； 边界半径：4px； 光标：指针； } 输入[类型=文本]， 输入[类型=日期]， 挑选{ 字体系列：Rajdhani，无衬线； 字体大小：16px； 宽度：100%； 填充：5px20px； 利润率：10px； 显示：块； 边框：1px实心ccc； 边界半径：15px； 框大小：边框框； }

---

引入一个庞大的库只是为了在同一行上排列项目，这有点过分了，你不觉得吗？我想也许他使用的平台已经有了引导，而他对此一无所知。我已经发布了一篇关于你当前html结构的编辑文章，你要么绝对定位它们，要么隐藏brs并对元素进行排序。你为什么将lname grid作为类添加到“lname div”中，而不使用任何CSS类来设置lname grid类的样式？@Flynno感谢你指出这一点。答案已编辑/更新