所以我正在为一个网站制作一个网站，我还有一个要制作的网页和它的登录页面。问题是，似乎我无法像文本框一样以形式和形式移动形式和事物。我想做的有点像蒸汽登录页面，我将在这里链接。基本上我想在页面中间有一个框，在框的左侧有一个用户名和密码的文本框，然后我想要一个细线从框的中间向下分开两半，在我想要的右侧三个框用于用户名，两个用于密码。事情是我似乎无法将我所拥有的东西移到盒子的左侧。 https://store.steampowered.com/login/那个蒸汽登录网站itll会让你知道我想做什么。
这是我到目前为止所做的，我只想将灰色框向下移动一点，然后将我现在的形状放在盒子的左侧，并在盒子的右侧写一个新的形式在中间的线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Portal 2 Launch site</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<h1><a href="HOME.html"> <img src="logo.png" class="center"></a><h1>
</head>
<body>
<!-- The navigation menu -->
<div class="navbar" style="width 100%">
<a href="HOME.html"style="width:20%">Home</a>
<a href="ABOUT.html"style="width:20%">About</a>
<a href="MEDIA.html"style="width:20%">Media</a>
<div class="subnav" style="width:20%">
<button class="subnavbtn" style="width: 100%">OtherGames</button>
<div class="subnav-content">
<a href="subHL.html">Half Life</a>
<a href="subTF2.html">Team Fortress 2</a>
<a href="subCS.html">Counter strike: Global Offensive</a>
</div>
</div>
<a href="ACCOUNT.html" Style="width:20%">Account</a>
</div>
<center>
<div class="container">
<a href="forgot.html" class="forgot">forgot password?</a>
<form>
<div class="input-wrap">
<label>Username:</label><br>
<input type="text">
</div>
<div class="input-wrap">
<label>Password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form1" value="Submit">Submit</button
</div>
<center>
</body>
</html>
body {
background-color: black;
color: black;
opacity: 300;
}
.container {
display: flex;
flex-direction: column;
background: gray;
border: 10px black;
margin:0;
width: 420px;
padding: 20px
}
.container1 {
display: flex;
flex-direction: column;
background: gray;
border: 10px black;
margin:0;
width: 620px;
padding: 20px
}
.input-wrap1 {
width:620px;
}
form {
display: flex;
flex-direction: column;
width: 200px;
}
.input-wrap {
margin: 5px;
}
input {
background-color: white;
border: 1px solid #4C4B63;
}
.submit{
background: #333;
color: white;
border-style: outset;
border-color: #0066A2;
height: 50px;
width: 100px;
font: bold 15px arial, sans-serif;
text-shadow:none;
cursor: pointer;
}
.submit:hover {
background: green;
color: #eee;
border: 1px solid #eee;
text-shadow:none;
cursor: pointer;
}
我给你留下了一个片段，上面写着你登录的想法。您将不得不修补它以适合您自己的风格。我留给你一个link到一个小游戏来学习flexbox，我在片段上使用。
.wrapper {
height: 500px;
display: flex;
align-items: center;
justify-content: center;
background-color: slategrey;
}
.login {
display: flex;
width: 400px;
height: 300px;
background-color: lightgrey;
padding: 10px;
}
.side {
flex: 1
}
.separator {
flex: 0;
border-left: 1px solid black;
width: 2px;
height: 250px;
margin: auto 16px;
}
.side {
flex: 1;
}<div class="wrapper">
<div class="login">
<div class="side">
<form>
<div>
<label>Username:</label><br>
<input type="text">
</div>
<div>
<label>Password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form1" value="Submit">Submit</button>
</div>
<div class="separator"></div>
<div class="side">
<form>
<div>
<label>Username:</label><br>
<input type="text">
</div>
<div>
<label>Password:</label><br>
<input type="password">
</div>
<div>
<label>Confirm password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form2" value="Submit">Submit</button>
</div>
</div>
</div>