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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com