个人中心
gpt4 book ai didi

php - 对齐下面的两个按钮

转载 作者：太空宇宙 更新时间：2023-11-03 22:18:04 27 4
gpt4 key购买 nike

我正在使用一个 div，我已经设置了登录系统的启动方式，但由于某种原因我无法让按钮位于下方。截图显示问题:

enter image description here

我在最底部使用了 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;

}

最佳答案

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

  • 包围form <form></form> 中的元素
  • 没有 type="Username" (改为type="text")
  • type="Password"应该是 type="password"
  • 使用label s 而不是 h1 s，并使用 for 将它们与您的表单输入相关联属性。 for 的值属性是 id添加到 input标签指向。单击 label 时您会知道它工作正常将光标聚焦在 input
  • 分开CSS来自 HTML为了清晰/可读性和重用样式的能力
  • 使用flexbox用于布局(我使用此表单的柱状方向来堆叠子项)

结果

enter image description here

演示

.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

关于php - 对齐下面的两个按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55403259/

27 4 0
文章推荐： c# - Microsoft Surface 中的文件选择器
文章推荐： c# - RoleManager 类(WriteToLog 方法)已移动或替换？
文章推荐： 用于小型 XML 文件的 C# XmlDocument - 重量/性能
文章推荐： c# - 无法在自定义类上调用 JavascriptSerialize
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com