要对齐以下两个按钮，请执行以下操作
要对齐以下两个按钮，请执行以下操作
提问于 2019-03-29 01:05:13
我使用的是一个div，我已经设置了登录系统的启动，但由于某种原因，我无法将按钮转到下面。屏幕截图显示问题：
我在最底层的CSS上使用了这个东西。我不知道其他CSS是否会有所帮助。
此外，由于这将很快成为一个带有数据库的登录系统，我想知道是否有任何人在制作自己的网站时发现方便的网站。
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="../css/header.css">
<link rel="stylesheet" type="text/css" href="../css/site.css">
</head>
<body>
<?php include '../header.html'; ?>
<div class="body-container">
<div class="menu">
<div class="login-container" style="">
<h1 style="padding-bottom: 10px;">Username</h1>
<input type="username" style="color: black; height: 50px; font-size:14pt;" name="user">
<h1>Password</h1>
<input type="Password" style="color: black; height: 50px; font-size:14pt; margin-top: 5%; " name="user">
<button>test</button>
</div>
</div>
</div>
</body>
</html>* {
margin: 0;
font-family: Arial;
color: white;
}
body {
background-image: url(../img/Background-Blurred.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center;
overflow-: hidden;
overflow: hidden;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
background-color: darkgrey;
height: 46px;
border-bottom: 0.05px solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #a0a0a0;
border-bottom: 0.05px solid black;
border: 0.05px solid black;
box-shadow: 0 12px 10px 0 rgba(0,0,0,0.24), 0 17px 10px 0 rgba(0,0,0,0.19);
}
/*The body in the center of website */
.body-container {
height: 100%;
width: 50%;
margin-left: auto;
margin-right: auto;
position: relative;
}
.menu {
padding: 20px;
margin-left: auto;
margin-right: auto;
width: auto;
height: 100rem;
background-color: darkgrey;
text-decoration-color: black;
}
.body-container .menu .title {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.body-container .body-text {
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 2.5%;
text-align: left;
}
.body-text {
font-size: 25px;
}
.announcement {
height: 100px;
padding: 5px;
width: auto;
background-color: midnightblue;
text-align: center;
margin-top: 20px;
vertical-align: middle;
border-radius: 25px;
}
.announcement-text {
padding-top: 10px;
}
.body-container .menu .login-container {
position: absolute;
top: 20%;
left: 40%;
size: 50px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55403259
复制相关文章
相似问题