Flex布局无法使表单内姓名输入div同行的问题求助

嘿，我来帮你排查下问题所在，其实你离成功只差几个关键设置：

问题分析 #

你遇到的核心问题有这几个：

• HTML属性错误：普通HTML里应该用class而不是className（后者是React等框架的写法），导致.sd-form-wrap的样式根本没被应用
• Flex容器设置缺失：.sd-form-wrap只加了flex-wrap，但没有设置display: flex——只有当元素是flex容器时，flex相关属性才会生效
• Flex容器范围错误：你给空的.sd-form-group设置了flex，但实际的姓名输入容器并没有被包含在这个容器里，等于flex布局没作用在正确的元素上

修改后的代码 #

修正后的HTML #

<form>
  <!-- 把.sd-form-wrap放到.sd-form-group里，让flex布局作用在正确的容器上 -->
  <div class="sd-form-group">
    <div class="sd-form-wrap">
      <div class="form-name form-first-name">
        <label>First Name</label>
        <br>
        <input type="text">
      </div>
      <div class="form-name form-last-name">
        <label>Last Name</label>
        <br>
        <input type="text">
      </div>
    </div>
    <div class="form-email">
      <label>Email</label>
      <br>
      <input type="text">
    </div>
    <div class="form-message">
      <label>Message</label>
      <br>
      <textarea placeholder="Enter your comments, questions and feedback here." rows="4"></textarea>
    </div>
    <div class="form-checkbox">
      <input type="checkbox">
      <label> Communications box. </label>
    </div>
    <input type="submit" value="Submit">
  </div>
</form>

修正后的CSS #

.sd-form-group{
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem; /* 给表单元素之间加一点间距，更美观 */
}
.sd-form-wrap {
  display: flex; /* 关键：设置为flex容器 */
  flex-wrap: wrap; /* 当屏幕变窄时自动换行，适配移动端 */
  gap: 1rem; /* 两个姓名输入框之间的间距 */
  width: 100%; /* 让容器占满父元素宽度 */
}
.form-name {
  flex: 1 1 180px; /* 让两个输入框自动分配空间，最小宽度180px保证移动端体验 */
}
.form-name input {
  width: 100%; /* 输入框占满父容器宽度 */
}

关键改动说明 #

1. 把.sd-form-wrap移动到.sd-form-group内部，让flex布局的作用范围正确覆盖所有表单元素
2. 给.sd-form-wrap添加display: flex，使其成为真正的flex容器
3. 给.form-name设置flex: 1 1 180px，确保两个输入框在空间足够时平分宽度，空间不足时自动换行
4. 修正了HTML里的className为class，保证样式正常生效
5. 添加了gap属性来控制元素间距，替代margin让布局更整洁

这样修改后，First Name和Last Name输入框就会默认在同一行显示，并且在小屏幕上会自动换行，兼顾了桌面端和移动端的体验～

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