Question

我试图调整这个html表单。我已经在这里待了一个小时，没有希望。我不知道我在这里做错了什么。我真的很感激你的帮助。

HTML：

1 < 6

的CSS：

<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "CSS/Login.css">
</head>
<body>
<h1> Admin Panel </h1>
<div class = "form-div">
    <form action = "Login.php" method = "POST">
        <input type = "email" name = "emailPost" placeholder = "Enter email..." required>
        <input type = "password" name = "passwordPost" placeholder = "Enter password..." required>
        <input type = "submit" value = "Submit">
    </form>
</div>

}

body {
background-color: #f4f4f4;
font: normal 16px Arial, Helvetica, sans-serif;
line-height:1.6em;
text-align: center;

谢谢！

Answer 1

使用百分比将在调整大小时起作用。 px是静态的，百分比将取决于屏幕大小。如果屏幕为1000px且div为50％，则div为500px。在使用px的情况下，div的大小永远不会改变。

请参阅此示例的小提琴：https://jsfiddle.net/eo9kcjv3/

HTML：

<body>
  <h1> Admin Panel </h1>
  <div class = "form-div">
    <form action = "Login.php" method = "POST">
        <input type = "email" name = "emailPost" placeholder = "Enter email..." required>
        <input type = "password" name = "passwordPost" placeholder = "Enter password..." required>
        <input type = "submit" value = "Submit">
    </form>
  </div>
</body>

CSS：

body {
background-color: #f4f4f4;
font: normal 16px Arial, Helvetica, sans-serif;
line-height:1.6em;
text-align: center;
}

.form-div {
display: table;
width: 100%;
background-color: red;
height: 30%;
margin-top:10%
}

form {
display: table-cell;
text-align: center;
vertical-align: middle;
}

form input[type="email"], [type="password"] {
border:none;
background:#f4f4f4;
border-bottom:1px solid black;
outline:none;
line-height:28px;
font-size:16px;
display: block;
width:20%;
margin-left:40%;
margin-top:10px;
}

input[type="submit"] {
background-color:#333;
color:#fff;
padding:10px 15px;
border:none;
margin-top:10px;
margin-bottom:10px;
}`

将Css表格与页面中心对齐（是的，我查看了其他答案，我无法使其工作）

1 个答案: