时间戳

首页 > 解决方案 > 如何在页面中间插入垂直线并将表单向左移动（css）

css - 如何在页面中间插入垂直线并将表单向左移动（css）

问题描述

我有一个快速的问题。如何将我的登录表单 div 移到左侧并在页面中心有一个垂直分隔符，并且仍然能够在页面右侧放置内容？我想做的是使用 display: inline 但是当我在包装器 div 中使用 display: inline 时，它​​会破坏页面的设置。谢谢！

代码

* {
  margin: 0;
  padding: 0;
}

*:focus {
  outline: none;
}

 ::placeholder {
  color: grey;
}

body {
  background-color: #ced4da;
}

.wrapper {
  height: 100vh;
  position: relative;
  background-color: red;
}

.login-form {
  background-color: green;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.email-input-field,
.password-input-field,
.submit-button {
  display: block;
}

input[type="email"],
input[type="password"] {
  border: none;
  background: white;
  height: 40px;
  font-size: 12px;
  margin-bottom: 8px;
  width: 250px;
  padding-left: 50px;
  color: grey;
}

input[type="submit"] {
  border: none;
  background-color: #3DBB96;
  height: 40px;
  width: 100%;
  font-size: 15px;
  font-weight: lighter;
  color: white;
}
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="CSS/Login.css">
</head>

<body>
  <div class="wrapper">
    <div class="login-form">
      <form action="Login.php" method="POST">
        <div class="email-input-field">
          <input type="email" name="emailPost" placeholder="Email" required>
        </div>
        <div class="password-input-field">
          <input type="password" name="passwordPost" placeholder="Password" required>
        </div>
        <div class="submit-button">
          <input type="submit" value="Login">
        </div>
      </form>
    </div>
    <div class="splitter"></div>
  </div>
</body>

标签： css

解决方案

我使用 flex 来创建你需要的东西。您必须检查新的 CSS 和 HTML（分隔符和右侧部分）才能完全理解我所做的。

* {
  margin: 0;
  padding: 0;
}

*:focus {
  outline: none;
}

 ::placeholder {
  color: grey;
}

body {
  background-color: #ced4da;
}

.wrapper {
  height: 100vh;
  position: relative;
  background-color: red;
  display: flex;
  justify-content: space-around;
}

.wrapper .login-form,
.wrapper .right-side {
  width: 45%;
}

.login-form {
  background-color: green;
  padding: 10px;
}

.email-input-field,
.password-input-field,
.submit-button {
  display: block;
}

input[type="email"],
input[type="password"] {
  border: none;
  background: white;
  height: 40px;
  font-size: 12px;
  margin-bottom: 8px;
  color: grey;
  width: 100%;
}

input[type="submit"] {
  border: none;
  background-color: #3DBB96;
  height: 40px;
  width: 100%;
  font-size: 15px;
  font-weight: lighter;
  color: white;
}

.separator {
  width: 0px;
  border: 2px solid black;
}
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="CSS/Login.css">
</head>

<body>
  <div class="wrapper">
    <div class="login-form">
      <form action="Login.php" method="POST">
        <div class="email-input-field">
          <input type="email" name="emailPost" placeholder="Email" required>
        </div>
        <div class="password-input-field">
          <input type="password" name="passwordPost" placeholder="Password" required>
        </div>
        <div class="submit-button">
          <input type="submit" value="Login">
        </div>
      </form>
    </div>
    <div class="separator"></div>
    <div class="right-side">Right side content</div>
  </div>
</body>

推荐阅读