要对齐以下两个按钮，请执行以下操作
要对齐以下两个按钮，请执行以下操作
提问于 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;
}回答 6
Stack Overflow用户
发布于 2019-03-29 01:25:18
真正的问题是你没有任何块级别的元素来封装你的“行”。其他输入在自己的行上的唯一原因是标题标签强制它们在那里。
所以最好的办法就是这样(IMO)
<div class="login-container" style="">
<div class="row" >
<h1 style="padding-bottom: 10px;">Username</h1>
<input type="username" style="color: black; height: 50px; font-size:14pt;" name="user">
</div>
<div class="row" >
<h1>Password</h1>
<input type="Password" style="color: black; height: 50px; font-size:14pt; margin-top: 5%; " name="user">
</div>
<div class="row" >
<button>test</button>
</div>
</div>然后，只需在最后一行执行text-align:center即可。
就我个人而言，我将使用标签字段而不是标题，这样您就可以使用for="{inputId}来使标签像它们应该的那样可点击。当涉及到形式时，我想我只是“老派”。
Stack Overflow用户
发布于 2019-03-29 01:22:03
如果我没理解错的话，您希望这个按钮出现在密码字段的下面，对吧？
通常我使用div将表单分成行，因为默认情况下它们是display: block和full width。如下所示：
<div>
<input type="Password" style="color: black; height: 50px; font-size:14pt; margin-top: 5%; " name="user">
<div>
<div class="login-btn-group">
<button>test</button>
<div>然后，您可以针对该div并按您所需的方式对齐按钮
.login-btn-group {
text-align: right;
}您也可以使用flex box或floats，但这很简单。此外，一旦您添加了标签(您应该这样做)，您就可以在div中包含这些标签，以便将它们像单独的组件一样保持在一起
Stack Overflow用户
发布于 2019-03-29 01:22:21
好的，据我所知，最简单的方法是，在css上：
button{
position: relative;
top: 6rem; // this will make your button get to any position you want following the (top, left, right, bottom) change the number to whatever suits you.
}另一件事，如果你想让你的按钮使用浮点值改变位置，你的div需要有一个值，当没有空间时，按钮向下，将你的输入设置为div大小的100%，并将div设置为你喜欢的值，使用。
*.login-container{
width:300px;
height:350px;
}
button{
position: relative;
float: left;
margin-top:1rem;
}另外，我建议你学习网格布局和flex-box。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55403259
复制相关文章
相似问题
腾讯云开发者
