HTML/CSS双语辞职表单左右侧标签起始对齐问题求助

针对你遇到的表单左右标签无法统一起始对齐的问题，核心原因是标签容器宽度未固定、RTL语言（阿拉伯文）排版方向冲突，以下是具体解决方法：

方法一：使用Grid布局（推荐） #

Grid能直接通过列宽定义实现标签区域的统一宽度，从根源上解决对齐偏差：

HTML结构示例 #

<form class="resign-form">
  <div class="form-row">
    <label class="label left">提交日期</label>
    <label class="label right">员工ID</label>
    <input type="text" placeholder="请输入员工ID">
  </div>
  <div class="form-row">
    <label class="label left">手机号</label>
    <label class="label right">员工姓名</label>
    <input type="text" placeholder="请输入员工姓名">
  </div>
  <div class="form-row">
    <label class="label left">离职原因</label>
    <label class="label right rtl">الاسم بالعربية</label>
    <input type="text" placeholder="请输入内容">
  </div>
</form>

CSS样式 #

.resign-form {
  display: grid;
  /* 定义三列：左侧标签、右侧标签、输入框，前两列固定宽度 */
  grid-template-columns: 110px 110px 1fr;
  gap: 12px;
  align-items: center;
  padding: 20px;
}

.label {
  padding: 6px 0;
}

/* 左侧标签右对齐，确保起始点统一 */
.label.left {
  text-align: right;
}

/* 右侧LTR标签左对齐 */
.label.right {
  text-align: left;
}

/* 阿拉伯文RTL标签特殊处理：设置排版方向，左对齐保证起始点统一 */
.label.right.rtl {
  direction: rtl;
  text-align: left;
}

.resign-form input {
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

方法二：使用Flex布局 #

如果更习惯Flex，通过固定标签的flex基准宽度实现对齐：

CSS样式 #

.resign-form {
  padding: 20px;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.label {
  /* 固定宽度，不允许伸缩 */
  flex: 0 0 110px;
  padding: 6px 0;
}

.label.left {
  text-align: right;
  margin-right: 8px;
}

.label.right {
  text-align: left;
  margin-right: 8px;
}

.label.right.rtl {
  direction: rtl;
  text-align: right;
}

.resign-form input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

关键注意点 #

1. 调整固定宽度值（示例中110px）时，确保能容纳最长的标签文本，避免换行；若需换行，可添加word-wrap: break-word;保证排版美观。
2. 阿拉伯文等RTL语言必须设置direction: rtl;，配合text-align调整，才能和其他右侧标签的起始点保持一致。
3. 两种布局都通过固定标签区域宽度，让所有标签的起始位置不受内容长度影响，彻底解决对齐偏差问题。

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