问题描述
html,body {
height: 100%;
font: 30px "2005_iannnnncpu";
}
body {
margin: 0;
padding: 0;
background: #000;
}
.grid-container {
display: grid;
height: 100%;
color: #fff;
justify-items: center;
align-items: center;
}
.square {
height: 50px;
width: 50px;
background-color: #fff;
}
.contain {
display: grid;
padding: 15px;
width: 60%;
height: 23%;
border: 3px solid #fff;
color: #fff;
}
.grid-items {
margin: 1% 1%;
}
.ans {
margin: 1% 1%;
font: 20px "2005_iannnnncpu";
letter-spacing: 2px;
}
input[type=text] {
background-color: none;
background: transparent;
border: 2px solid #555;
color: #fff;
}
input[type=text]:focus {
border: 2px solid #fff;
}
textarea:focus,input:focus{
outline: none;
}
.button {
border: none;
color: white;
padding: 2% 2%;
margin: 6% 6%;
text-align: center;
text-decoration: none;
cursor: pointer;
outline: none;
}
.login {
background-color: #000;
font: 30px "2005_iannnnncpu";
color: #fff;
border: 2px solid #fff;
width: 50%;
-ms-transform: translateX(40%);
transform: translateX(40%);
}
.login:focus {
background-color:white;
color: black;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Neglected Moment</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="grid-container">
<div class="square"></div>
<div class="contain">
<label class="grid-items">Username</label>
<input type="text" class="ans" id="ans-user" name="ans-user"></input>
<label class="grid-items">Password</label>
<input type="text" class="ans" id="ans-pass" name="ans-pass"></input>
<button class="button login">login</button>
</div>
</div>
</body>
</html>
图片:
我想画正方形只是背景,但是我的问题是包含。
当我在网络顶部绘制正方形时。我以前的代码(登录表格)会坏了。
我认为它包含,但是我不知道如何解决它。
谢谢您的帮助。
我可以删除红色部分吗?我希望我的登录表单居中,但现在不正确了
解决方法
从.contain
类中删除高度,并使用绝对位置添加按钮
html,body {
height: 100%;
font: 30px "2005_iannnnnCPU";
}
body {
margin: 0;
padding: 0;
background: #000;
}
.grid-container {
display: grid;
height: 100%;
color: #fff;
justify-items: center;
align-items: center;
}
/*
.square {
height: 50px;
width: 50px;
background-color: #fff;
}
*/
.contain {
display: grid;
padding: 15px 15px 50px;/*New css*/
width: 60%;
/*height: 23%;*/
border: 3px solid #fff;
color: #fff;
position: relative;/*New css*/
margin-bottom: 60px; /*New css*/
}
.grid-items {
margin: 1% 1%;
}
.ans {
margin: 1% 1%;
font: 20px "2005_iannnnnCPU";
letter-spacing: 2px;
}
input[type=text] {
background-color: none;
background: transparent;
border: 2px solid #555;
color: #fff;
}
input[type=text]:focus {
border: 2px solid #fff;
}
textarea:focus,input:focus {
outline: none;
}
.button {
border: none;
color: white;
padding: 2% 2%;
margin: 6% 6%;
text-align: center;
text-decoration: none;
cursor: pointer;
outline: none;
}
.login {
background-color: #000;
font: 30px "2005_iannnnnCPU";
color: #fff;
border: 2px solid #fff;
width: 50%;
-ms-transform: translateX(40%);
transform: translateX(40%);
position: absolute;
bottom: -50px;
}
.login:focus {
background-color: white;
color: black;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Neglected Moment</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="grid-container">
<div class="contain">
<label class="grid-items">Username</label>
<input type="text" class="ans" id="ans-user" name="ans-user"/>
<label class="grid-items">Password</label>
<input type="text" class="ans" id="ans-pass" name="ans-pass"/>
<button class="button login">login</button>
</div>
</div>
</body>
</html>
,
问题出在您的
.contain { height: 23%;};
我将其更改为65%,并且可以在代码段中使用,但您应该尝试将其设置为所需的显示高度。
html,body {
height: 100%;
font: 30px "2005_iannnnnCPU";
}
body {
margin: 0;
padding: 0;
background: #000;
}
.grid-container {
display: grid;
height: 100%;
color: #fff;
justify-items: center;
align-items: center;
}
/*
.square {
height: 50px;
width: 50px;
background-color: #fff;
}
*/
.contain {
display: grid;
padding: 15px;
width: 60%;
height: 65%;
border: 3px solid #fff;
color: #fff;
}
.grid-items {
margin: 1% 1%;
}
.ans {
margin: 1% 1%;
font: 20px "2005_iannnnnCPU";
letter-spacing: 2px;
}
input[type=text] {
background-color: none;
background: transparent;
border: 2px solid #555;
color: #fff;
}
input[type=text]:focus {
border: 2px solid #fff;
}
textarea:focus,input:focus {
outline: none;
}
.button {
border: none;
color: white;
padding: 2% 2%;
margin: 6% 6%;
text-align: center;
text-decoration: none;
cursor: pointer;
outline: none;
}
.login {
background-color: #000;
font: 30px "2005_iannnnnCPU";
color: #fff;
border: 2px solid #fff;
width: 50%;
-ms-transform: translateX(40%);
transform: translateX(40%);
}
.login:focus {
background-color: white;
color: black;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Neglected Moment</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="grid-container">
<div class="contain">
<label class="grid-items">Username</label>
<input type="text" class="ans" id="ans-user" name="ans-user"></input>
<label class="grid-items">Password</label>
<input type="text" class="ans" id="ans-pass" name="ans-pass"></input>
<button class="button login">login</button>
</div>
</div>
</body>
</html>
,
为什么不是字段集:
https://jsfiddle.net/mplungjan/utpnxfca/
html,body {
height: 100%;
font: 30px "2005_iannnnnCPU";
}
body {
margin: 0;
padding: 0;
background: #000;
}
.grid-container {
display: grid;
height: 100%;
color: #fff;
justify-items: center;
align-items: center;
}
.square {
height: 50px;
width: 50px;
background-color: #fff;
}
.contain {
display: grid;
padding: 15px;
border: 3px solid #fff;
color: #fff;
}
.grid-items {
margin: 1% 1%;
}
.ans {
margin: 1% 1%;
font: 20px "2005_iannnnnCPU";
letter-spacing: 2px;
}
input[type=text] {
background-color: none;
background: transparent;
border: 2px solid #555;
color: #fff;
}
input[type=text]:focus {
border: 2px solid #fff;
}
textarea:focus,input:focus {
outline: none;
}
.button {
border: none;
color: white;
padding: 2% 2%;
margin: 6% 6%;
text-align: center;
text-decoration: none;
cursor: pointer;
outline: none;
}
.login {
background-color: #000;
font: 30px "2005_iannnnnCPU";
color: #fff;
border: 2px solid #fff;
width: 50%;
-ms-transform: translateX(40%);
transform: translateX(40%);
}
.login:focus {
background-color: white;
color: black;
font-weight: bold;
}
<div class="grid-container">
<div class="square"></div>
<fieldset class="contain">
<legend>Login</legend>
<label class="grid-items">Username</label>
<input type="text" class="ans" id="ans-user" name="ans-user" />
<label class="grid-items">Password</label>
<input type="text" class="ans" id="ans-pass" name="ans-pass" />
<button class="button login">login</button>
</fieldset>
</div>