将按钮与表单的右端对齐

Question

我试图将下面的“登录”按钮放在登录表单的右端，但由于某种原因我无法实现它。

我想要它的外观：

目前的样子：

我的前端代码如下：

    <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 新手，因此我们将不胜感激，谢谢！

Answer 1

问题

yourrux-button.sign-in-btn是该元素的子元素.body-container，它使用 flex-box 将表单与中心对齐。因此，当 CSS 对齐到末尾时，它会根据其父元素:进行对齐.body-container。

解决方案

让您的<form>元素也是一个弹性盒容器，然后align-self: end应该在按钮上按预期运行。

像这样嵌套 Flexbox 容器元素是完全正常的。

风格

.rux-form {
  width: 30%;
  max-width: 430px;
  display: flex;
  flex-direction: column;
}

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

标记

<form className="rux-form">
  ...
  <rux-button className="sign-in-btn" type="submit">
    Sign in
  </rux-button>
</form>

如果您不想display: flex在表单本身上使用，另一种选择是创建一个占据表单整个宽度的 Flexbox 容器，该容器将按钮作为子项，然后您可以将按钮相对于该容器向右对齐 -其具有表格宽度。

风格

div.sign-in-container {
  display: flex;
  justify-content: end;
  width: 100%;
}

标记

<form className="rux-form">
  ...
  <div class="sign-in-container">
    <rux-button type="submit">Sign in</rux-button>
  </div>
</form>

额外的

由于您要求额外的 CSS 建议，请注意，此嵌套 Flexbox 容器策略也可用于处理“记住我”和“忘记密码”控件的对齐。

.sign-in-helper-functions {
  display: flex;
  justify-content: space-between;
}