小编Sup*_*der的帖子

将按钮与表单的右端对齐

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

我想要它的外观:

Figma设计

目前的样子:

代码

我的前端代码如下:

    <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>

Run Code Online (Sandbox Code Playgroud)

我的 CSS 是什么样子的:

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

.body-container {
  display: flex;
  flex-direction: column; …
Run Code Online (Sandbox Code Playgroud)

html javascript css flexbox reactjs

0
推荐指数
1
解决办法
222
查看次数

标签 统计

css ×1

flexbox ×1

html ×1

javascript ×1

reactjs ×1