javascript 将按钮与窗体的右端对齐

pgx2nnw8 于 2023-09-29 发布在 Java

关注(0)|答案(2)|浏览(121)

我试图让下面的“登录”按钮在我的登录表单的右端，但由于某种原因我无法实现它。
我想要的样子：

它目前的样子：

我的前端代码看起来像什么：

<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 protected]"
              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，所以任何帮助，将不胜感激，以及，谢谢！

JavaScript

来源：https://stackoverflow.com/questions/77183961/align-a-button-to-the-right-end-of-a-form

2条答案

按热度按时间

prdp8dxp1#

这不是真正的“前端代码”，因为它在浏览器中不起作用。如果你稍微整理一下，在sign-in-btn前面添加一个.，它确实可以工作：

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

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

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

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

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

赞(0）回复(0）举报 2023-09-29

bzzcjhmw2#

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

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

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

.btn {
  display: flex;
  justify-content:end
}

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

赞(0）回复(0）举报 2023-09-29

我来回答

javascript 将按钮与窗体的右端对齐

2条答案

相关问题

热门标签

最新问答