对齐下面的两个按钮

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (19)

我正在使用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;

}
提问于
用户回答回答于

创建一个新文件并对其进行测试我现在只需将.login-container定位到顶部或底部以及字体大小,如果你想要更改你也可以使用vw响应字体

* {
    margin: 0;
    font-family: Arial;
    color: white;
}
body {
    background-image: url("https://cdn.pixabay.com/photo/2018/09/23/18/30/drop-3698073_960_720.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    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 {
    text-align: center;
    height: 100%;
    width: 50%;
    margin: 0 auto;
  
}
.menu {
    
    width: auto;
    height: 100rem;
    background-color: darkgrey;
    text-decoration-color: black;
}
.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-text {
    padding-top: 10px;
}

.announcement {
    height: 100px;
    padding: 5px;
    width: auto;
    background-color: midnightblue;
    text-align: center;
    margin-top: 20px;
    vertical-align: middle;
    border-radius: 25px;
}

.login-container {
    top: 10%;
    position: relative;
}

<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; " name="user">
                <h1>Password</h1>
                <input type="Password" style="color: black; height: 50px; " name="user">
                <div class="button">
                <button>test</button>
            </div>
            </div>
           

        </div>
    </div>



</body>
用户回答回答于

利用fieldsetlabel处理表单,然后允许您使用CSS根据需要设置样式。

<form method="post" enctype="multipart/form-data" action="">
<fieldset>
<label for="username">User Name</label>
<input type="text" name="username" value="" maxlength="255" required="required" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" value="" maxlength="255" required="required" /></fieldset>
<fieldset>
<button style="width: 150px;" type="submit" name="doSomething">Log In</button>
<br />
<button style="width: 150px;" type="submit" name="resetPassword">Reset Password</button>
</fieldset>
</form>

扫码关注云+社区

领取腾讯云代金券