html - 我怎样才能把我的两个在同一个路线上？

Question

我希望“登录”和“注册”与顶部的高度对齐，请查看下面的示例以获得更清晰的信息

我想成为这样

我也使用 Bootstrap 4，但不是为了我想做的事情，我在某处读到最好不使用 Bootstrap 自己做。

这是我使用的代码：

CSS：

.content{
  height: calc(100vh - 100px);
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.content > div{
  padding:10em;
  flex: 1;
  width: 100%;
}

html:

<div class="content">
        <div class="content-one">
            <h1>Login</h1>
            <form method="post">
                <div class="form-group">
                    <label>Username</label>
                    <div class="control">
                        <input type="text" class="form-control" name="username" placeholder="Username" />
                    </div>
                </div>

                <div class="form-group">
                    <label>Password</label>
                    <div class="control">
                        <input type="password" class="form-control" name="password" placeholder="Password" />
                    </div>
                </div>

                <div class="form-group">
                    <input value="Log in" type="submit" class="btn btn-red fw-4" />
                </div>
            </form>
        </div>
        <div class="content-two">
            <h1>Register</h1>
            <form action="/register" method="post">
                <div class="form-group">
                    <label>Username</label>
                    <div class="control">
                        <input type="text" class="form-control" name="username" placeholder="Username" />
                    </div>
                </div>

                <div class="form-group">
                    <label>Email</label>
                    <div class="control">
                        <input type="text" class="form-control" name="email" placeholder="Email">
                    </div>
                </div>

                <div class="form-group">
                    <label>Password</label>
                    <div class="control">
                        <input type="password" class="form-control" name="password" placeholder="Password" />
                    </div>
                </div>

                <div class="form-group">
                    <label>Are you a robot ?</label>
                    <div class="control">
                        <div class="g-recaptcha" data-sitekey="6Le18_YZAAAAAPZHps-_4XB3U6yTXh0dMFsJdJpF"></div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                        <p class="form-check-label" for="defaultCheck1">
                            I have read and agree <a href="#">the terms of use</a>.
                        </p>
                    </div>
                </div>

                <div class="form-group">
                    <input value="Register" type="submit" class="btn btn-grey" />
                </div>
            </form>
        </div>
    </div>

如果可以使用 Bootstrap 4 来完成，我也可以。

标签： htmlcssbootstrap-4

Answer 1

删除align-items: center;样式并将填充设置为0 3em（将 3em 更改为您想要的值）

.content {
  height: calc(100vh - 100px);
  width: 100%;
  display: flex;
  overflow: hidden;
}

.content>div {
  flex: 1;
  width: 100%;
  padding:0 3em; // Update 3em to fit your UI
}

<div class="content">
  <div class="content-one">
    <h1>Login</h1>
    <form method="post">
      <div class="form-group">
        <label>Username</label>
        <div class="control">
          <input type="text" class="form-control" name="username" placeholder="Username" />
        </div>
      </div>

      <div class="form-group">
        <label>Password</label>
        <div class="control">
          <input type="password" class="form-control" name="password" placeholder="Password" />
        </div>
      </div>

      <div class="form-group">
        <input value="Log in" type="submit" class="btn btn-red fw-4" />
      </div>
    </form>
  </div>
  <div class="content-two">
    <h1>Register</h1>
    <form action="/register" method="post">
      <div class="form-group">
        <label>Username</label>
        <div class="control">
          <input type="text" class="form-control" name="username" placeholder="Username" />
        </div>
      </div>

      <div class="form-group">
        <label>Email</label>
        <div class="control">
          <input type="text" class="form-control" name="email" placeholder="Email">
        </div>
      </div>

      <div class="form-group">
        <label>Password</label>
        <div class="control">
          <input type="password" class="form-control" name="password" placeholder="Password" />
        </div>
      </div>

      <div class="form-group">
        <label>Are you a robot ?</label>
        <div class="control">
          <div class="g-recaptcha" data-sitekey="6Le18_YZAAAAAPZHps-_4XB3U6yTXh0dMFsJdJpF"></div>
        </div>
      </div>

      <div class="form-group">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
          <p class="form-check-label" for="defaultCheck1">
            I have read and agree <a href="#">the terms of use</a>.
          </p>
        </div>
      </div>

      <div class="form-group">
        <input value="Register" type="submit" class="btn btn-grey" />
      </div>
    </form>
  </div>
</div>