You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何实现注册表单输入框按指定行排列？求助解决布局问题

avatar
API 探路者
2026-7-25
注册表单布局问题求助

我正在制作注册表单，想要实现以下布局：

  • First Name 和 Last Name 在同一行显示
  • 下一行展示 Email 和 Phone Number
  • 再下一行显示 Password 和 Confirm Password

尝试多种方案后仍无法达成目标布局（参考样式为The Odin Project的注册表单）。请查看以下代码并协助解决：

现有CSS代码 

* { font-family: "Alata", sans-serif; margin: 0; } h2 { font-size: 1.5rem; } h3 { font-size: 1rem; }.main { display: flex; align-items: center; justify-content: space-between; flex-direction: row; }.leftScreen { background-image: url("bg.jpg"); background-size: cover; height: 100vh; width: 34%; }.logoBox { display: flex; align-items: center; justify-content: center; background-color: rgb(255, 255, 255); width: 100%; height: 15vh; margin-top: 165px; }.logo { background-image: url("logo.png"); background-size: cover; background-color: transparent; height: 30vh; width: 300px; margin-bottom: 40px; }.formScreen { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 66%; background-color: #f9fafb; }.upper { display: flex; align-items: left; justify-content: center; flex-direction: column; height: 35vh; width: 100%; }.upperText { font-size: 1.5rem; margin-top: 50px; margin-left: 40px; width: 75%; }.lowerText { font-size: 1.5rem; margin-left: 40px; }.form { font-size: 1 rem; height: 30vh; width: 100%; background-color: rgb(255, 255, 255); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }.form h2 { margin-top: 20px; margin-left: 40px; }.finish { display: flex; align-items: left; justify-content: center; flex-direction: column; height: 35vh; width: 100%; }.accountBtn { background-color: rgb(89, 108, 72); font-size: 1rem; color: white; border-radius: 10px; border: 0; width: 200px; height: 45px; margin-left: 40px; margin-bottom: 150px; }.finish h3 { margin-left: 40px; margin-bottom: 40px; position: absolute; }.login { color: green; text-decoration: none; }

现有HTML代码 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login Form</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Alata&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="main">
      <div class="leftScreen">
        <div class="logoBox">
          <div class="logo"></div>
        </div>
      </div>
      <div class="formScreen">
        <div class="upper">
          <div class="upperText">
            This is not a real online service! You know you need something like
            this in your life to help you realize your deepest dreams.
            <br />Sign up <em>now</em> to get started.<br />
          </div>
          <br />
          <div class="lowerText">You <em>know</em> you want to.</div>
        </div>
        <div class="form">
          <h2>Let's do this!</h2>
          <form action="#" method="get">
          <div class="input">
            <label for="firstName"> First Name </label>
          </div>
          <input type="firstName" id="firstName" name="firstName" />
          <div class="input">
            <label for="lastName">Last Name</label>
          </div>
          <input type="lastName" id="lastName" name="lastName">
          <div class="input">
            <label for="email">Email</label>
          </div>
          <input type="email" id="email" name="email">
          <div class="input">
            <label for="lastName">Phone Number</label>
          </div>
          <input type="phoneNumber" id="phoneNumber" name="phoneNumber">
          <div class="input">
            <label for="password">Password</label>
          </div>
          <input type="password" id="password" name="password">
          <div class="input">
            <label for="confirmPassword">Confirm Password</label>
          </div>
          <input type="confirmPassword" id="confirmPassword" name="confirmPassword">
        </div>
      </form>
        <div class="finish">
          <button class="accountBtn">Create Account</button>
          <h3>
            Already have an account?<a class="login" href="/login"> Log In</a>
          </h3>
        </div>
      </div>
    </div>
  </body>
</html>

解决方案

要实现目标布局，核心是用Flexbox分组控制每行的输入项，同时调整HTML结构和CSS样式：

修改后的完整代码

CSS代码

* { 
  font-family: "Alata", sans-serif; 
  margin: 0;
  box-sizing: border-box; /* 避免padding破坏宽度计算 */
} 

h2 { font-size: 1.5rem; } 
h3 { font-size: 1rem; }

.main { 
  display: flex; 
  flex-direction: row; 
  height: 100vh; /* 主容器占满视口高度 */
}

.leftScreen { 
  background-image: url("bg.jpg"); 
  background-size: cover; 
  width: 34%; 
}

.logoBox { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background-color: rgba(255, 255, 255, 0.8); /* 半透明背景贴近参考样式 */
  width: 100%; 
  height: 15vh; 
  margin-top: 165px; 
}

.logo { 
  background-image: url("logo.png"); 
  background-size: cover; 
  background-color: transparent; 
  height: 10vh; 
  width: 100px; 
}

.formScreen { 
  display: flex; 
  flex-direction: column; 
  width: 66%; 
  background-color: #f9fafb; 
}

.upper { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  height: 35vh; 
  padding: 0 40px; 
}

.upperText { 
  font-size: 1.5rem; 
  width: 75%; 
  margin-bottom: 20px;
}

.lowerText { 
  font-size: 1.5rem; 
}

.form { 
  font-size: 1rem; 
  padding: 20px 40px; 
  background-color: rgb(255, 255, 255); 
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
}

.form h2 { 
  margin-bottom: 20px; 
}

/* 新增：控制每行输入项的容器 */
.form-row {
  display: flex;
  gap: 40px; /* 两个输入项的间距 */
  margin-bottom: 20px;
}

/* 单个输入项容器 */
.input {
  display: flex;
  flex-direction: column;
  width: 40%; /* 每个输入项占行宽的40% */
}

.input label {
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 5px;
}

.input input {
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 1rem;
}

.input input:focus {
  outline: none;
  border-color: #596c48; /* 聚焦边框色与按钮呼应 */
  box-shadow: 0 0 0 2px rgba(89, 108, 72, 0.2);
}

.finish { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  height: 35vh; 
  padding: 0 40px; 
}

.accountBtn { 
  background-color: rgb(89, 108, 72); 
  font-size: 1rem; 
  color: white; 
  border-radius: 8px; 
  border: 0; 
  width: 200px; 
  height: 45px; 
  margin-bottom: 20px;
  cursor: pointer;
}

.finish h3 { 
  margin: 0;
}

.login { 
  color: #596c48; 
  text-decoration: none; 
  font-weight: bold;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sign Up Form</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Alata&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="main">
      <div class="leftScreen">
        <div class="logoBox">
          <div class="logo"></div>
        </div>
      </div>
      <div class="formScreen">
        <div class="upper">
          <div class="upperText">
            This is not a real online service! You know you need something like
            this in your life to help you realize your deepest dreams.
            <br />Sign up <em>now</em> to get started.<br />
          </div>
          <div class="lowerText">You <em>know</em> you want to.</div>
        </div>
        <div class="form">
          <h2>Let's do this!</h2>
          <form id="signup-form" action="#" method="get">
            <!-- 第一行：First Name + Last Name -->
            <div class="form-row">
              <div class="input">
                <label for="firstName">First Name</label>
                <input type="text" id="firstName" name="firstName" required />
              </div>
              <div class="input">
                <label for="lastName">Last Name</label>
                <input type="text" id="lastName" name="lastName" required />
              </div>
            </div>

            <!-- 第二行：Email + Phone Number -->
            <div class="form-row">
              <div class="input">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" required />
              </div>
              <div class="input">
                <label for="phoneNumber">Phone Number</label>
                <input type="tel" id="phoneNumber" name="phoneNumber" />
              </div>
            </div>

            <!-- 第三行：Password + Confirm Password -->
            <div class="form-row">
              <div class="input">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required />
              </div>
              <div class="input">
                <label for="confirmPassword">Confirm Password</label>
                <input type="password" id="confirmPassword" name="confirmPassword" required />
              </div>
            </div>
          </form>
        </div>
        <div class="finish">
          <button class="accountBtn" type="submit" form="signup-form">Create Account</button>
          <h3>
            Already have an account? <a class="login" href="/login">Log In</a>
          </h3>
        </div>
      </div>
    </div>
  </body>
</html>

关键修改说明

  1. 新增.form-row容器，通过Flexbox实现每行两个输入项的并排布局
  2. 将每个输入项的标签和输入框包裹在.input容器中，保证垂直排列
  3. 修复输入框type属性错误（比如type="firstName"改为标准的type="text"）
  4. 添加required属性增强表单基础验证
  5. 优化间距、阴影和聚焦效果，贴近参考样式的视觉表现

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.25 19:35:02