如何实现fname、lname标签同行且对应输入框置于其下方？

下面给你几个简单可靠的实现方案，直接套用就能解决问题：

方案1：Flex布局（推荐，现代浏览器兼容性好） #

把两个姓名项包裹在flex容器里，每个项内部用块级元素让输入框自动换行到标签下方：

<div class="name-group">
  <div class="name-item">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="fname">
  </div>
  <div class="name-item">
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lname">
  </div>
</div>

.name-group {
  display: flex;
  gap: 20px; /* 两个姓名项之间的间距，可调整 */
}

.name-item label {
  display: block; /* 让标签独占一行，输入框自动到下方 */
  margin-bottom: 5px; /* 标签和输入框的间距 */
}

.name-item input {
  width: 150px; /* 输入框宽度，可按需调整 */
  box-sizing: border-box;
}

方案2：Inline-block布局（兼容旧浏览器） #

通过给每个姓名项设置display: inline-block，同时让标签独占一行：

<div class="name-group">
  <div class="name-item">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="fname">
  </div>
  <div class="name-item">
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lname">
  </div>
</div>

.name-item {
  display: inline-block;
  margin-right: 20px; /* 两个项的间距 */
}

.name-item label {
  display: block;
  margin-bottom: 5px;
}

.name-item input {
  width: 150px;
  box-sizing: border-box;
}

方案3：Grid布局（更简洁的写法） #

用grid容器把两个项放在同一列轨道，内部结构和前两个一致：

<div class="name-group">
  <div class="name-item">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="fname">
  </div>
  <div class="name-item">
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lname">
  </div>
</div>

.name-group {
  display: grid;
  grid-template-columns: auto auto;
  gap: 20px;
}

.name-item label {
  display: block;
  margin-bottom: 5px;
}

.name-item input {
  width: 150px;
  box-sizing: border-box;
}

注意事项 #

• 避免给标签或输入框设置float，容易导致布局混乱（这可能是你之前第二个标签消失的原因）；
• box-sizing: border-box可以让输入框的宽度包含边框和内边距，避免布局超出预期；
• 可根据需求调整gap、margin、width等参数，适配页面样式。

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