替代表格实现登录表单单行内堆叠两行文本的现代方案

我已经在Stack Overflow搜遍了熟悉的关键词，实现了一个单行布局的登录表单：邮箱输入框、密码输入框、提交按钮在一行，中间还内联了两行堆叠的内容——「Remember Me」复选框和「Forgot Password?」链接。目前用的是Table结构，现在想知道这是不是最优方案，有没有浏览器支持良好的更现代实现方式？

当前代码如下：

<input type="email" name="email_address" id="email_address" tabindex="1" placeholder="Enter your EMAIL address">
<input type="password" name="password" id="password" tabindex="2" placeholder="Enter your PASSWORD">
<table style="display:inline-table;">
  <tr>
    <td  style="line-height:0.5; padding-top:0;">
      <input type="checkbox" id="remember_me" name="remember_me">
      <label style="color:#fff; font-size:70%;" for="remember_me"> Remember Me</label>
    </td>
  </tr>
  <tr>
    <td  style="line-height:0.5">
      <label style="color:#fff; font-size:70%;" for="remember_me">Forgot Password?</label>
    </td>
  </tr>
</table>
<input type="submit" name="submit" id="submit" tabindex="3" value="Login" onClick="Login();">

用Table做布局确实不符合HTML语义化原则——Table本来是用来展示表格数据的，不是做页面布局的，而且你的代码里全是内联样式，后期维护起来也麻烦。现在有两种浏览器支持极佳的现代布局方案，完全可以替代Table实现你的需求：

方案一：Flexbox布局（更推荐） #

Flexbox就是为一维布局设计的，刚好适配你这种「单行排列+内部两行堆叠」的场景，支持所有现代浏览器，包括IE11（兼容性拉满）。

语义化HTML结构 #

先把结构改得更合理——注意你原来的「Forgot Password?」用了<label>还绑定了remember_me的ID，这是错误的，它是跳转链接，应该用<a>标签：

<form class="login-form">
  <input type="email" name="email_address" id="email_address" tabindex="1" placeholder="Enter your EMAIL address">
  <input type="password" name="password" id="password" tabindex="2" placeholder="Enter your PASSWORD">
  
  <div class="login-actions">
    <label class="remember-me" for="remember_me">
      <input type="checkbox" id="remember_me" name="remember_me">
      Remember Me
    </label>
    <a href="#" class="forgot-password">Forgot Password?</a>
  </div>
  
  <input type="submit" name="submit" id="submit" tabindex="3" value="Login" onclick="Login();">
</form>

CSS样式 #

把内联样式全部抽出来，用Flexbox控制布局：

.login-form {
  display: flex;
  align-items: center;
  gap: 12px; /* 直接控制所有元素之间的间距，不用一个个调边距 */
}

.login-actions {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 控制「Remember Me」和「Forgot Password?」的垂直间距 */
}

.remember-me, .forgot-password {
  color: #fff;
  font-size: 70%;
}

/* 可选：给表单元素加基础样式，优化视觉 */
.login-form input[type="email"],
.login-form input[type="password"],
.login-form input[type="submit"] {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
}

.login-form input[type="submit"] {
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
}

方案二：Grid布局 #

Grid是二维布局神器，这里也能快速实现需求，兼容性同样优秀（IE11需要加前缀，但现在基本没人用IE了）。

CSS样式（复用上面的语义化HTML） #

.login-form {
  display: grid;
  grid-template-columns: auto auto auto auto; /* 四个元素各占一列 */
  align-items: center;
  gap: 12px;
}

.login-actions {
  display: grid;
  gap: 4px;
}

/* 其他样式和Flexbox方案一致 */

这些方案的好处 #

• 语义更对：用<div>和<a>代替Table，结构清晰，符合HTML设计初衷。
• 更好维护：样式集中在CSS里，改颜色、字体大小只需要改一处，不用找遍所有内联样式。
• 兼容性够好：Flexbox和Grid覆盖99%以上的用户，不用怕浏览器兼容问题。
• 灵活度高：想调整间距直接改gap值，响应式适配的时候，只要修改Flex的方向或者Grid的列数就能适配手机端。

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