Question

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

}

Answer 1

在随意抛出补丁和黑客来“修复”表单之前，我们应该备份并从语法上正确的有效表单开始。我采用了表单标记，并消除了错误，并进行了一些增强和可访问性改进。

围绕form中的<form></form>元素
没有type="Username"（已更改为type="text"）
type="Password"应该是type="password"
使用label而不是h1，然后使用for属性将它们与表单输入相关联。 for属性的值是一个id，它被添加到标签所指向的input中。单击label时，您将知道它可以正常工作，将光标聚焦在input
将CSS与HTML分开以提高清晰度/可读性和重用样式的能力
使用flexbox进行布局（我为此表单使用了列式方向来堆叠子项）

结果

演示

.login-container {
  display: flex;
  flex-direction: column;
  max-width: 450px;
  margin: 0 auto;
}

.login-container input {
  font-size: 14pt;
  padding: .25em .5em;
  color: black;
  margin-bottom: .5em;
}

.login-container .actions {
  display: flex;
  justify-content: center;
}

.login-container [type="submit"] {
  margin-left: 1em;
}

<form action="/login" method="post" class="login-container">
  <label for="username">Username</label>
  <input id="username" type="text">
  <label for="password">Password</label>
  <input id="password" type="password">
  <div class="actions">
    <a href="#">Forgot password?</a>
    <button type="submit">Login</button>
  </div>
</form>

jsFiddle

Answer 2

真正的问题是您没有任何封装“行”的块级元素。其他输入单独显示的唯一原因是标题标签将它们强制输入。

所以最好的办法是这样做（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}使标签可点击，就像它们应该是可点击的一样。猜想我只是表格方面的“老派”。

Answer 3

如果我对您的理解正确，您希望按钮显示在密码字段的下方吗？

通常，我使用div将表单分为几行，因为默认情况下它们显示为：块和全宽。像这样：

<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中，以使它们像单个组件一样保持在一起

Answer 4

好吧，据我所知，最简单的方法是在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;
}

另一件事是，我建议您学习网格布局和弹性框。

Answer 5

欢迎来到Web开发领域。以下是我对代码进行的最小更改，以获取所需的输出。

<div class="login-container" style="">
    <h1 style="padding-bottom: 10px;">Username</h1>
    <input type="text" name="username" style="color: black; height: 50px; font-size:14pt;">
    <h1>Password</h1>
    <input type="password" name="password" style="color: black; height: 50px; font-size:14pt; margin-top: 5%;">
    <div class="login-actions">
        <center>
            <a>forgot password?</a> &nbsp;&nbsp; <button type="submit">Login</button>
        </center>
    </div>
</div>

我鼓励您通过现代的css frameworks来简化生活。

Answer 6

在处理表单时利用fieldset和label，然后可以根据需要使用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>

Answer 7

创建一个新文件并对其进行测试，现在我使其具有响应性，您只需将.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>

对齐下面的两个按钮

7 个答案:

结果

演示