如何让登录表单的两个输入框水平对齐（标签居左）

要实现标签在左、输入框对齐的效果，核心是让两个标签占据相同宽度，这样输入框的起始位置就能保持一致。下面提供两种简单可靠的方案，同时帮你理清CSS对齐的核心逻辑：

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

这种方式灵活易维护，适配大多数表单场景：

修改后的HTML代码 #

<link href='./index-style.css' rel='stylesheet'>

<head>
  <title>Site Guillaume Test</title>
</head>

<body>
  <div class="Loging">
    <h2>Login :</h2>
    <div class="Username-Password">
      <form>
        <!-- 给每组标签+输入框单独包裹容器 -->
        <div class="form-row">
          <label for="pseudo">Username :</label>
          <input type="text" name="pseudo" id="pseudo" placeholder="Enter Username" required>
        </div>
        <div class="form-row">
          <label for="password">Password :</label>
          <input type="password" name="password" id="password" placeholder="Enter Password" required>
        </div>
      </form>
    </div>
  </div>
</body>

修改后的CSS代码 #

div.Loging {
  background: url("https://via.placeholder.com/800") no-repeat center center;
  background-size: cover;
  height: 800px;
  /* 让表单整体垂直居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

div.Username-Password {
  /* 可选：给表单加半透明背景增强可读性 */
  background: rgba(255,255,255,0.8);
  padding: 20px;
  border-radius: 8px;
}

.form-row {
  /* 开启flex布局，让标签和输入框在同一行 */
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 300px;
}

.form-row label {
  /* 给标签设置固定宽度，确保两个标签占比一致 */
  width: 100px;
  text-align: right;
  margin-right: 10px;
}

.form-row input {
  /* 输入框占剩余全部宽度 */
  flex: 1;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

方案二：Grid布局 #

如果需要更规整的表单结构，Grid是更直接的选择：

CSS部分替换（HTML与方案一一致） #

/* 替换.form-row相关样式，直接给form设置Grid */
div.Username-Password form {
  display: grid;
  /* 定义两列：第一列固定宽度，第二列占剩余空间 */
  grid-template-columns: 100px 1fr;
  column-gap: 10px;
  row-gap: 10px;
  width: 300px;
  /* 标签右对齐，视觉更整齐 */
  text-align: right;
}

div.Username-Password input {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

为什么你之前的尝试没生效？ #

• 直接给Username-Password设置flex/grid：会把所有标签和输入框当成同一级元素排列，导致布局混乱，必须给每组标签+输入框单独设置容器，才能实现每行的有序对齐。
• 用display:block：块级元素默认占满一行，所以标签会跑到输入框上方，这是块级元素的固有特性。
• text-align：仅能控制元素内部文本的对齐，无法改变不同元素的位置关系。

核心对齐逻辑总结 #

要实现横向对齐，关键是让需要对齐的元素拥有统一的参考基准：

1. 给标签设置固定宽度，确保输入框的起始位置完全一致。
2. 用Flex/Grid布局管理每行元素，让它们在水平方向上按规则排列。

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