首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >要对齐以下两个按钮,请执行以下操作

要对齐以下两个按钮,请执行以下操作
EN

Stack Overflow用户
提问于 2019-03-29 01:05:13
回答 6查看 97关注 0票数 0

我使用的是一个div,我已经设置了登录系统的启动,但由于某种原因,我无法将按钮转到下面。屏幕截图显示问题:

我在最底层的CSS上使用了这个东西。我不知道其他CSS是否会有所帮助。

此外,由于这将很快成为一个带有数据库的登录系统,我想知道是否有任何人在制作自己的网站时发现方便的网站。

代码语言:javascript
复制
<!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>
代码语言:javascript
复制
* {
     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;

}
EN

回答 6

Stack Overflow用户

发布于 2019-03-29 01:25:18

真正的问题是你没有任何块级别的元素来封装你的“行”。其他输入在自己的行上的唯一原因是标题标签强制它们在那里。

所以最好的办法就是这样(IMO)

代码语言:javascript
复制
<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}来使标签像它们应该的那样可点击。当涉及到形式时,我想我只是“老派”。

票数 1
EN

Stack Overflow用户

发布于 2019-03-29 01:22:03

如果我没理解错的话,您希望这个按钮出现在密码字段的下面,对吧?

通常我使用div将表单分成行,因为默认情况下它们是display: block和full width。如下所示:

代码语言:javascript
复制
<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并按您所需的方式对齐按钮

代码语言:javascript
复制
.login-btn-group {
    text-align: right;
}

您也可以使用flex box或floats,但这很简单。此外,一旦您添加了标签(您应该这样做),您就可以在div中包含这些标签,以便将它们像单独的组件一样保持在一起

票数 0
EN

Stack Overflow用户

发布于 2019-03-29 01:22:21

好的,据我所知,最简单的方法是,在css上:

代码语言:javascript
复制
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设置为你喜欢的值,使用。

代码语言:javascript
复制
*.login-container{
  width:300px;
  height:350px;
}

button{
  position: relative;
  float: left;
  margin-top:1rem;
}

另外,我建议你学习网格布局和flex-box。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55403259

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档