如何实现标签、输入框与span居中对齐并统一标签宽度

要实现你想要的布局，只需要对CSS做几处调整，同时修正HTML里的小问题即可：

修改后的CSS #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; /* 避免padding影响元素宽度计算 */
}

.form-fieldset {
  width: max-content;
  padding: 15px;
  margin: 5px;
}

.row {
  display: flex;
  justify-content: flex-start; /* 替换space-between，避免元素分散过开 */
  align-items: center; /* 实现垂直居中对齐 */
  margin-bottom: 10px; /* 给每行添加间距，排版更清晰 */
}

.row label {
  width: 160px; /* 设置固定宽度，确保所有标签宽度一致 */
  text-align: right; /* 标签右对齐，视觉更整齐 */
  margin-right: 10px; /* 和输入框之间留出间距 */
}

.row input {
  margin-right: 10px; /* 和右侧提示文本之间留出空间 */
}

.row span {
  color: #666; /* 可选：给提示文本设置灰色，区分输入内容 */
}

修改后的HTML #

<fieldset class="form-fieldset">
  <legend>Formulaire d'inscripton :</legend>
  <div class="row">
    <label for="inp1">Votre nom:</label>
    <input id="inp1" class="a" type="text" />
    <span>Le Champ est obligatoire</span>
  </div>
  <div class="row">
    <label for="inp2">Votre prénom:</label>
    <input id="inp2" class="a" type="text" />
    <span>Le prénom doit avoir au moins 10 caractères en minuscule</span>
  </div>
  <div class="row">
    <label for="inp3">Votre Age: </label>
    <input id="inp3" class="a" type="number" /> <!-- 修正输入类型错误 -->
    <span>Age est un nombre de deux chiffres</span>
  </div>

  <div class="row">
    <label for="inp4"> Votre adresse email:</label>
    <input id="inp4" class="a" type="email" />
    <span>Écrire une adresse mail valide</span> <!-- 修正提示文本的排版 -->
  </div>
</fieldset>

关键调整说明 #

• 给label设置固定宽度并右对齐，确保所有标签宽度统一，视觉上更规整
• 给.row添加align-items: center，让标签、输入框和提示文本垂直居中对齐
• 给input和label添加margin-right，确保元素之间留有足够空间
• 修正了HTML里的输入类型错误（type="nombre"改为type="number"）和提示文本的排版问题
• 添加box-sizing: border-box避免元素内边距影响宽度计算

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