Html 调整窗口大小时CSS元素重叠
我知道我之前也写过类似的帖子，但我没有得到答案，所以我想我应该再试试，看看是否有人能帮我。基本上，我的CSS元素是重叠的（特别是登录框、垂直线和侧文本类）。我尝试使用百分比来避免这个问题，但它并没有真正锻炼 如果我使用媒体查询，在计算机web浏览器应用程序上调整大小将不准确，对吗？如果要使用媒体查询，如果用户正在调整窗口浏览器的大小，我怎么知道要将最小宽度设置为什么 这是我的代码，我到目前为止Html 调整窗口大小时CSS元素重叠,html,css,css-position,Html,Css,Css Position,我知道我之前也写过类似的帖子，但我没有得到答案，所以我想我应该再试试，看看是否有人能帮我。基本上，我的CSS元素是重叠的（特别是登录框、垂直线和侧文本类）。我尝试使用百分比来避免这个问题，但它并没有真正锻炼 如果我使用媒体查询，在计算机web浏览器应用程序上调整大小将不准确，对吗？如果要使用媒体查询，如果用户正在调整窗口浏览器的大小，我怎么知道要将最小宽度设置为什么 这是我的代码，我到目前为止 *：焦点{ 大纲：无； } 身体{ 背景：ced4da； 保证金：0； 填充：0； 字体系列：无衬线
*：焦点{
大纲：无；
}
身体{
背景：ced4da；
保证金：0；
填充：0；
字体系列：无衬线；
}
.登录框{
宽度：300px；
高度：170px；
背景：rgba（0,0,0,0）；
颜色：白色；
最高：50%；
左：33%；
位置：绝对位置；
转换：翻译（-50%，-50%）；
框大小：边框框；
衬垫顶部：12.5px；
}
.电子邮件输入字段{
位置：相对位置；
}
.密码输入字段{
位置：相对位置；
}
.电子邮件输入字段i{
位置：绝对位置；
左：0px；
顶部：4px；
填充：9px 8px；
颜色：暗灰色；
过渡：0.3s；
}
.密码输入栏i{
位置：绝对位置；
左：0px；
顶部：4px；
填充：9px 12px；
颜色：暗灰色；
过渡：0.3s；
}
.电子邮件输入字段输入：焦点+i，
.密码输入字段输入：焦点+i{
颜色：淡蓝色；
}
.登录框.电子邮件输入字段，
.密码输入字段{
边缘底部：10px；
}
.登录框输入[type=“email”]，
输入[type=“password”]{
边界：无；
背景：白色；
高度：40px；
字体大小：12px；
宽度：83%；
左侧填充：50px；
}
.登录框输入[type=“submit”]{
边界：无；
背景色：#3db96；
颜色：白色；
大纲：无；
高度：40px；
宽度：100%；
字体大小：15px；
字体重量：较轻；
}
.登录框输入[type=“submit”]：悬停{
背景色：#07A973；
}
：：占位符{
颜色：灰色；
}
.垂直线{
左边框：1px实心暗灰色；
宽度：1px；
高度：170px；
最高：50%；
左：50%；
位置：绝对位置；
转换：翻译（-50%，-50%）；
框大小：边框框；
}
.附文{
宽度：200px；
高度：80px；
最高：50%；
左：63%；
位置：绝对位置；
转换：翻译（-50%，-50%）；
线高：100%；
}
.侧边文本p{
字体重量：较轻；
}
.侧边文本h1{
字体大小：正常；
}
冷行动
行政小组
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title> Admin Login </title>
<link rel="stylesheet" type="text/css" href="CSS/Login.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
*:focus {
outline: none;
}
body {
background: #ced4da;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.login-box {
width: 300px;
height: 170px;
background: rgba(0,0,0,0);
color: white;
box-sizing: border-box;
padding-top: 12.5px;
}
.email-input-field {
position: relative;
}
.password-input-field {
position: relative;
}
.email-input-field i {
position: absolute;
left: 0px;
top: 4px;
padding: 9px 8px;
color:darkgrey;
transition: 0.3s;
}
.password-input-field i {
position: absolute;
left: 0px;
top: 4px;
padding: 9px 12px;
color:darkgrey;
transition: 0.3s;
}
.email-input-field input:focus + i, .password-input-field input:focus + i {
color:dodgerblue;
}
.login-box .email-input-field, .password-input-field {
margin-bottom: 10px;
}
.login-box input[type="email"], input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
width: 83%;
padding-left: 50px;
}
.login-box input[type="submit"] {
border: none;
background-color: #3DBB96;
color: white;
outline: none;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
}
.login-box input[type="submit"]:hover {
background-color: #07A973;
}
::placeholder {
color: grey;
}
.splitter {
border-left: 1px solid darkgrey;
width:1px;
height: 170px;
box-sizing: border-box;
margin: 0 20px;
}
.side-text {
width: 200px;
height: 80px;
line-height: 100%;
}
.side-text p {
font-weight: lighter;
}
.side-text h1 {
font-weight: normal;
}
.wrapper {
display: flex;
align-items: center;
height: 100vh;
justify-content: center;
}
@media (max-width: 640px) {
.wrapper {
flex-direction: column;
}
.splitter {
border-top: 1px solid darkgrey;
height:1px;
width: 170px;
margin: 20px 0;
}
.side-text {
text-align: center;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class = "login-box">
<form action = "Login.php" method = "POST">
<div class = "email-input-field">
<input type = "email" name = "emailPost" placeholder = "Email" autocomplete = "off">
<i class = "fa fa-envelope fa-lg" aria-hidden = "true"></i>
</div>
<div class = "password-input-field">
<input type = "password" name = "passwordPost" placeholder = "Password" autocomplete = "off">
<i class = "fa fa-lock fa-lg" aria-hidden = "true"></i>
</div>
<input type = "submit" name = "submit" value = "Login">
</form>
</div>
<div class = "splitter"></div>
<div class = "side-text">
<h1> COLD OPS </h1>
<p> ADMINISTRATION PANEL </p>
</div>
</div>
</body>
</html>
管理员登录
*：焦点{
大纲：无；
}
身体{
背景：ced4da；
保证金：0；
填充：0；
字体系列：无衬线；
}
.登录框{
宽度：300px；
高度：170px；
背景：rgba（0,0,0,0）；
颜色：白色；
框大小：边框框；
衬垫顶部：12.5px；
}
.电子邮件输入字段{
位置：相对位置；
}
.密码输入字段{
位置：相对位置；
}
.电子邮件输入字段i{
位置：绝对位置；
左：0px；
顶部：4px；
填充：9px 8px；
颜色：暗灰色；
过渡：0.3s；
}
.密码输入栏i{
位置：绝对位置；
左：0px；
顶部：4px；
填充：9px 12px；
颜色：暗灰色；
过渡：0.3s；
}
.电子邮件输入字段输入：focus+i，.密码输入字段输入：focus+i{
颜色：淡蓝色；
}
.登录框.电子邮件输入字段..密码输入字段{
边缘底部：10px；
}
.登录框输入[type=“email”]，输入[type=“password”]{
边界：无；
背景：白色；
高度：40px；
字体大小：12px；
宽度：83%；
左侧填充：50px；
}
.登录框输入[type=“submit”]{
边界：无；
背景色：#3db96；
颜色：白色；
大纲：无；
高度：40px；
宽度：100%；
字体大小：15px；
字体重量：较轻；
}
.登录框输入[type=“submit”]：悬停{
背景色：#07A973；
}
：：占位符{
颜色：灰色；
}
.拆分器{
左边框：1px实心暗灰色；
宽度：1px；
高度：170px；
框大小：边框框；
利润率：0.20px；
}
.附文{
宽度：200px；
高度：80px；
线高：100%；
}
.侧边文本p{
字体重量：较轻；
}
.侧边文本h1{
字体大小：正常；
}
.包装纸{
显示器：flex；
对齐项目：居中；
高度：100vh；
证明内容：中心；
}
@介质（最大宽度：640像素）{
.包装纸{
弯曲方向：立柱；
}
.拆分器{
边框顶部：1px实心暗灰色；
高度：1px；
宽度：170px；
利润率：20px0；
}
.附文{
文本对齐：居中；
}
}
冷行动
行政小组