我已經(jīng)學(xué)習(xí)HTML和CSS兩天了，所以代碼可能很粗糙，但是有人知道為什么輸入框沒有在單獨(dú)的行上，即使它們?cè)诓煌膁iv元素中。
我有一個(gè)不同的代碼，它們?cè)诓煌男兄校也铧c(diǎn)把它復(fù)制到一個(gè)T中，但是問題仍然出現(xiàn)。第一個(gè)文本是我的HTML，第二個(gè)文本是CSS。圖像是輸出，這也是我的第一篇文章，如果我做錯(cuò)了什么，我很抱歉
結(jié)果:
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background:linear-gradient(to bottom, purple, rgb(0, 183, 255));
background-repeat: no-repeat;
background-attachment: fixed;
}
.glass{
height: 550px;
width: 400px;
border: 3px solid;
background-color: rgba(38, 38, 38,1);
border-radius: 10%;
box-shadow: 10px 45px 100px black;
}
form{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
transform: scale(1.5,1.5);
}
input{
border: none;
background: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="glass"></div>
<form action="results.html" method="GET">
<div class="email">
<label for="email"></label>
<input type="email" name="email" id="email" required placeholder="Email">
</div>
<div class="pass">
<label for="password"></label>
<input type="password" name="password" id="password" required placeholder="Password">
</div>
</form>
</body>
</html>Flex默認(rèn)為方向行，你需要flex-direction: column來使它們?cè)?行上。
此外，form上的transform: scale(1.5，1.5)會(huì)導(dǎo)致元素超過其父元素。
如果你想放大文本，使用字體大小，這里不需要縮放。
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background:linear-gradient(to bottom, purple, rgb(0, 183, 255));
background-repeat: no-repeat;
background-attachment: fixed;
}
.glass{
height: 550px;
width: 400px;
border: 3px solid;
background-color: rgba(38, 38, 38,1);
border-radius: 10%;
box-shadow: 10px 45px 100px black;
}
form{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: absolute;
/* transform: scale(1.5,1.5); */
}
input{
border: none;
background: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="glass"></div>
<form action="results.html" method="GET">
<div class="email">
<label for="email"></label>
<input type="email" name="email" id="email" required placeholder="Email">
</div>
<div class="pass">
<label for="password"></label>
<input type="password" name="password" id="password" required placeholder="Password">
</div>
</form>
</body>
</html>*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background:linear-gradient(to bottom, purple, rgb(0, 183, 255));
background-repeat: no-repeat;
background-attachment: fixed;
}
.glass{
height: 550px;
width: 400px;
border: 3px solid;
background-color: rgba(38, 38, 38,1);
border-radius: 10%;
box-shadow: 10px 45px 100px black;
}
form{
position: absolute;
transform: scale(1.5,1.5);
}
input{
border: none;
background: white;
margin-top:10px;
}
.label{
color: white;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="glass"></div>
<form action="results.html" method="GET">
<div class="email">
<label for="email" class="label">Email:</label>
<input type="email" name="email" id="email" required placeholder="Email">
</div>
<div class="pass">
<label for="password" class="label">Password:</label>
<input type="password" name="password" id="password" required placeholder="Password">
</div>
</form>
</body>
</html>