个人中心
gpt4 book ai didi

css - 如何在页面中间插入垂直线并将表格向左移动(css)

转载 作者：太空宇宙 更新时间：2023-11-04 01:12:33 25 4
gpt4 key购买 nike

我有一个简短的问题。如何将我的登录表单 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>

最佳答案

使用 Flexbox 相对简单，我们没有在 div.leftside 上设置 flex 值，所以它的宽度保持依赖于内容，splitter 可以表示为边框，但是将其作为一个单独的元素会打开更多样式可能性

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #1d1f20;
  color: #FFF;
}

*:focus {
  outline: none;
}

::placeholder {
  color: grey;
}

.main {
  display: flex;
  height: 100vh;
}

.rightSide {
  flex: 1 0 0%;
  background: #7e7eff;
}

.leftSide {
  background: #262658;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.splitter {
  background: grey;
  width: 10px;
}

.login-form {
  background-color: #1d1f20;
  border: 1px solid;
  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;
  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;
}
<div class="main">
  <div class="leftSide">
    <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>
  <div class="splitter"></div>
  <div class="rightSide">


  </div>
</div>

同样可以使用 CSS Grid 实现

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #1d1f20;
  color: #FFF;
}

*:focus {
  outline: none;
}

::placeholder {
  color: grey;
}

.main {
  display: grid;
  height: 100vh;
  grid-template-columns: auto auto 1fr;
}

.rightSide {
  background: #7e7eff;
}

.leftSide {
  background: #262658;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.splitter {
  background: grey;
  width: 10px;
}

.login-form {
  background-color: #1d1f20;
  border: 1px solid;
  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;
  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;
}
<div class="main">
  <div class="leftSide">
    <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>
  <div class="splitter"></div>
  <div class="rightSide">


  </div>
</div>

编辑:

我们在 flex 容器中对齐内容的方式是:align-self 在 flex 元素上或 aling-items 在 flex 容器上，现在因为 flexbox 只进入垂直或水平方向，我们使用 flex-direction 属性更改它，我们垂直放置一个并根据需要对齐元素，然后水平放置另一个并根据需要对齐元素。

我试图制作自己的示例以使其更简洁？

如果你能找到一门关于 flexbox 的类(class)，用谷歌搜索或者在 youtube 上寻找它会更好(我在那里学到了我所知道的一切)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #1d1f20;
  color: #FFF;
}

.main {
  height: 100vh;
  background-color: pink;
  display: flex;
}

.main>.left {
  flex: 1;
  display: flex;
  background: brown;
}

.main>.left>.form-wrapper {
  flex: 1;
  background: orange;
  padding: 10px;
  align-self: center;
  display: flex;
  flex-direction: column;
}

.main>.left>.form-wrapper>form {
  background: #1d1f20;
  padding: 10px;
  width: 200px;
  align-self: flex-end;
}

.main>.left>.form-wrapper>form>input {
  margin-bottom: 5px;
  width: 100%;
}

.main>.split {
  width: 5px;
  background: #00ff74;
}

.main>.right {
  flex: 1;
  background: purple;
  display: flex;
}

.main>.right>.welcome {
  flex: 1;
  background: #2d162d;
  align-self: center;
  display: flex;
  flex-direction: column;
}

.main>.right>.welcome>h2 {
  background: #9a7d9a;
  align-self: center;
}
<div class="main">

  <div class="left">
    <div class="form-wrapper">
      <form>
        <input type="text" placeholder="Name" name="">
        <input type="text" placeholder="Email" name="">
        <input type="button" value="Done !" name="">
      </form>
    </div>
  </div>
  <div class="split"></div>
  <div class="right">
    <div class="welcome">
      <h2>Welcome !</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
    </div>
  </div>

</div>

关于css - 如何在页面中间插入垂直线并将表格向左移动(css)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50897861/

25 4 0
文章推荐： javascript - 如何在nodejs中正确使用域
文章推荐： c - 如何使用 gets_s 在 C 中使用 atoi 转换 - 包含示例代码
文章推荐： node.js - 无需在 Nodejs Express 中预加载模块即可组织路由
文章推荐： c - glibc - 强制函数调用(无内联扩展)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com