如何用CSS实现input标签与标题垂直对齐并将label左置？

需求说明 #

现有嵌套容器结构，内部包含H1标签和表单，需要实现两个效果：

1. 所有Input标签与H1标签从起始位置对齐
2. Label放在Input左侧，示例效果如下：

exampleName
name []

username []

已尝试代码 #

CSS代码 #

.edit_profile_user_container {
  width: 70%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edit_profile_user_wrapper {
  width: 90%;
  height: 90%;
  vertical-align: baseline;
}

.edit_profile_user_info {
  height: 10%;
  width: 100%;
}

.edit_profile_user_form {
  height: 90%;
  width: 100%;
  border: none;
}

HTML代码 #

<div className='edit_profile_user_container'>
  <div className='edit_profile_user_wrapper'>
    <div className='edit_profile_user_info'>
      <p>username</p>
    </div>
    <form className='edit_profile_user_form'>
      <div className='edit_profile_input_section'>
        <label for="name">Name</label>
        <input type="text" name="name" />
      </div>
      <div className='edit_profile_input_section'>
        <label for="username">Username</label>
        <input type="text" name="username" />
      </div>
    </form>
  </div>
</div>

修改方案 #

调整后的CSS代码 #

.edit_profile_user_container {
  width: 70%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edit_profile_user_wrapper {
  width: 90%;
  height: 90%;
}

/* 给H1设置统一的对齐基准，移除多余边距 */
.edit_profile_user_info h1 {
  margin: 0 0 1rem 0;
}

.edit_profile_user_form {
  height: 90%;
  width: 100%;
  border: none;
  /* 表单内元素纵向排列，增加间距提升可读性 */
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.edit_profile_input_section {
  /* 让Label与Input横向排列 */
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.edit_profile_input_section label {
  /* 给Label设置固定宽度，确保所有Input起始位置对齐 */
  flex: 0 0 100px;
  /* 可选：Label右对齐，更贴近示例排版效果 */
  text-align: right;
}

.edit_profile_input_section input {
  /* 让Input占据剩余宽度，也可设置固定宽度 */
  flex: 1;
  min-width: 180px;
}

调整后的HTML代码 #

<div className='edit_profile_user_container'>
  <div className='edit_profile_user_wrapper'>
    <div className='edit_profile_user_info'>
      <!-- 将原P标签改为H1，符合需求中的标题结构 -->
      <h1>exampleName</h1>
    </div>
    <form className='edit_profile_user_form'>
      <div className='edit_profile_input_section'>
        <!-- 补充ID属性，与Label的for属性匹配，提升可访问性 -->
        <label for="name">Name</label>
        <input type="text" name="name" id="name" />
      </div>
      <div className='edit_profile_input_section'>
        <label for="username">Username</label>
        <input type="text" name="username" id="username" />
      </div>
    </form>
  </div>
</div>

方案说明 #

1. 给输入项容器.edit_profile_input_section设置Flex布局，实现Label与Input的横向排列；
2. 给Label设置固定宽度，确保所有Input的起始位置统一，同时与H1的起始位置保持对齐；
3. 可选给Label添加text-align: right，让Label右对齐，更贴近示例中的排版效果；
4. 将原HTML中的<p>标签改为<h1>，符合需求中的标题结构，并补充Input的id属性，与Label的for属性匹配，提升页面可访问性。

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