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