如何实现段落元素并排？表单firstName与lastName布局调整求助

嘿，这个需求实现起来超简单！要把lastName输入框直接放在firstName旁边，咱们有两种很实用的方法，结合你现有的代码就能轻松搞定：

Flexbox是当前做横向布局最便捷的方式，兼容性也拉满。你只需要给包含这两个输入框的容器设置display: flex，再微调输入框的宽度和间距就行：

修改后的CSS代码 #

body { 
  background: #384047; 
  font-family: sans-serif; 
  font-size: 10px; 
}
form { 
  background: #fff; 
  padding: 3em 2em 2em; 
  max-width: 350px; 
  margin: 100px auto 0; 
  box-shadow: 0 0 1em #222; 
  border-radius: none; 
}
p { 
  margin: 0 0 2em 0; 
  position: relative; 
}
/* 新增：给姓名容器设置Flex布局 */
.name-group {
  display: flex;
  gap: 1em; /* 控制两个输入框之间的间距 */
}
.name-group input {
  flex: 1; /* 让两个输入框自动平分容器宽度 */
}
#moreInfo { 
  font-size: 2em; 
  position: relative; 
  text-align: center; 
}

对应的HTML结构 #

<form>
  <!-- 用div包裹两个姓名输入框，形成Flex容器 -->
  <div class="name-group">
    <p>
      <label for="firstName">First Name</label>
      <input type="text" id="firstName" name="firstName">
    </p>
    <p>
      <label for="lastName">Last Name</label>
      <input type="text" id="lastName" name="lastName">
    </p>
  </div>

  <!-- 其他表单元素... -->
  <p id="moreInfo">More Info</p>
  <!-- 下拉菜单相关代码... -->
</form>

如果你需要兼容一些非常老旧的浏览器，也可以用浮动来实现这种横向布局：

修改后的CSS代码 #

body { 
  background: #384047; 
  font-family: sans-serif; 
  font-size: 10px; 
}
form { 
  background: #fff; 
  padding: 3em 2em 2em; 
  max-width: 350px; 
  margin: 100px auto 0; 
  box-shadow: 0 0 1em #222; 
  border-radius: none; 
}
p { 
  margin: 0 0 2em 0; 
  position: relative; 
}
/* 新增：设置姓名输入框的浮动规则 */
.name-group p {
  float: left;
  width: calc(50% - 0.5em); /* 减去一半间距，避免容器宽度溢出 */
  margin-right: 1em;
}
.name-group p:last-child {
  margin-right: 0; /* 去掉最后一个元素的右边距，避免多余空隙 */
}
/* 清除浮动，防止影响后续元素布局 */
.name-group::after {
  content: "";
  display: table;
  clear: both;
}
#moreInfo { 
  font-size: 2em; 
  position: relative; 
  text-align: center; 
}

对应的HTML结构 #

和方案1一致，只需要把两个姓名输入框放进name-group容器即可：

<form>
  <div class="name-group">
    <p>
      <label for="firstName">First Name</label>
      <input type="text" id="firstName" name="firstName">
    </p>
    <p>
      <label for="lastName">Last Name</label>
      <input type="text" id="lastName" name="lastName">
    </p>
  </div>

  <!-- 其他表单元素... -->
</form>

小提示 #

• 你可以根据设计需求调整gap（Flex方案）或者宽度、边距（Float方案），让布局更贴合你的预期
• 如果输入框的标签需要保持在输入框上方，这两种方案都能自动帮你维持对齐效果

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