如何将Sign in按钮对齐至登录表单右端？CSS布局求助

预期效果 #

当前效果 #

我的前端代码 #

<RuxContainer className="container">
  <div slot="header" className="header-container">
    <h3 className="first-header-item">LOGO</h3>
    <RuxClock timezone="Z"></RuxClock>
    <RuxMonitoringIcon status="normal"></RuxMonitoringIcon>
  </div>
  <div className="body-container">
    <form className="rux-form">
      <h2 className="body-sign-in">SIGN IN</h2>
      <h6>Measure your success in the Space Force!</h6>
      <div className="sign-in-inputs">
        <rux-input
          id="email"
          placeholder="Email@astro.com"
          label="Email"
          type="email"
          ruxblur="{handleValidation()}"
        ></rux-input>
        <rux-input id="pw" label="Password" type="password"></rux-input>
      </div>
      <div className="sign-in-helper-functions">
        <rux-checkbox class="checkbox">Remember me</rux-checkbox>
        <h2 className="forgot-password">Forgot Password?</h2>
      </div>
    </form>
    <rux-button className="sign-in-btn" type="submit">
      Sign in
    </rux-button>
  </div>
</RuxContainer>

我的CSS代码 #

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.body-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rux-form {
  width: 30%;
  max-width: 430px;
}

sign-in-btn {
  align-self: flex-end;
}

我是CSS新手，希望能得到相关帮助，谢谢！

解决方案 #

1. 修正CSS选择器错误 #

你当前的CSS中，sign-in-btn是标签选择器，但按钮用的是className="sign-in-btn"类名，必须改为类选择器（加.）：

.sign-in-btn {
  align-self: flex-end;
}

2. 调整布局让按钮靠右 #

你的按钮现在在<form>外部，而.body-container设置了align-items: center，导致按钮始终居中。推荐两种解决方法：

方法一：将按钮移入表单内（更符合语义）

把rux-button放到<form>的末尾，然后给表单添加flex垂直布局，让按钮自动靠右：

修改后的HTML：

<form className="rux-form">
  <h2 className="body-sign-in">SIGN IN</h2>
  <h6>Measure your success in the Space Force!</h6>
  <div className="sign-in-inputs">
    <rux-input
      id="email"
      placeholder="Email@astro.com"
      label="Email"
      type="email"
      ruxblur="{handleValidation()}"
    ></rux-input>
    <rux-input id="pw" label="Password" type="password"></rux-input>
  </div>
  <div className="sign-in-helper-functions">
    <rux-checkbox class="checkbox">Remember me</rux-checkbox>
    <h2 className="forgot-password">Forgot Password?</h2>
  </div>
  <!-- 按钮移到表单内 -->
  <rux-button className="sign-in-btn" type="submit">
    Sign in
  </rux-button>
</form>

修改后的CSS：

.rux-form {
  width: 30%;
  max-width: 430px;
  display: flex;
  flex-direction: column; /* 垂直排列表单元素 */
  gap: 1rem; /* 可选，增加元素间距 */
}

.sign-in-btn {
  align-self: flex-end; /* 让按钮靠右对齐 */
}

方法二：保持按钮在表单外，调整容器布局

如果不想移动按钮，让.body-container和表单宽度一致，取消全局居中，改为让容器自身居中：

修改后的CSS：

.body-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 子元素左对齐，按钮可靠右 */
  width: 30%;
  max-width: 430px; /* 和表单宽度一致 */
  margin: 0 auto; /* 让整个容器水平居中 */
}

.rux-form {
  width: 100%; /* 表单占满容器宽度 */
}

.sign-in-btn {
  align-self: flex-end; /* 按钮靠右 */
  margin-top: 1rem; /* 可选，增加和表单的间距 */
}

两种方法都能实现按钮靠右对齐的效果，推荐方法一，因为提交按钮属于表单的一部分，语义更合理。

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