html - 对齐复选框和按钮
问题描述
我正在尝试使用用户名和密码在登录表单下对齐,左侧有一个复选框,上面写着“还记得我吗?” 右边是一个登录按钮,但我不知道如何正确对齐它们。目前它们不在所需的位置,看起来很糟糕复选框和登录按钮的代码位于 css 的末尾- label.custom-checkbox 和 .loginbutton
<head>
<link rel="stylesheet" type="text/css" href="form.css">
<style>
body, html, div, p {
margin: 0px;
padding: 0px;
}
body {
padding: 5px;
font-family: Verdana;
}
#loginbox {
width: 700px;
height: 300px;
background: #e6e6e6;
}
#heding {
font-family: Verdana;
font-weight: 600;
font-size: 22px;
color: #3B5998;
padding: 5px;
}
#register {
position: relative;
left: 3%;
top: 4%;
}
.necessery {
color: grey;
font-size: 12px;
padding: 5px;
}
#reg-submit {
width: 150px !important;
background-color: #e6e6e6;
border: 2px solid #3B5998 !important;
border-radius: 0px !important;
height: 30px !important;
margin-left: 105px !important;
}
#register input {
display: block;
margin-top: 10px;
border: 1px solid #b3b3b3;
border-radius: 2px;
width: 35%;
height: 22px;
padding: 2px;
padding-left: 8px;
}
.reg-hud {
font-weight: 600;
color: grey;
font-size: 18px;
}
a {
text-decoration: none;
}
a .f-blue {
color: #3B5998;
}
#login {
background-color: #3B5998;
padding: 10px;
position: relative;
float:right;
right: 15%;
bottom: 67%;
}
.log-hud {
color: white;
font-weight: bold;
}
.login-div input {
display: block;
margin-top: 10px;
border: 1px solid #b3b3b3;
border-radius: 2px;
width: 245px;
height: 22px;
padding: 2px;
padding-left: 8px;
}
.login-div {
text-align: center;
}
#checkbox {
float: none;
width: auto;
display: inline-block;
}
#checkbox-label {
font-size:12px;
display: inline-block;
vertical-align: top;
margin-top: 13px;
color: #fff;
}
label.custom-checkbox input[type="checkbox"] {
float:left;
opacity:0;
}
label.custom-checkbox input[type="checkbox"] ~ .helping-el{
background-color: #5072A7;
border: 4px solid white;
border-radius: 2px;
display: inline-block;
padding: 10px;
position: relative;
top: 2px;
}
label.custom-checkbox input[type="checkbox"]:checked ~ .helping-el{
border: 4px solid #F8F8FF;
background-color: #5072A7;
}
label.custom-checkbox input[type="checkbox"]:checked ~ .helping-el:after {
color: #FFFFFF;
content: "\2714";
font-size: 20px;
font-weight: normal;
left: 2px;
position: absolute;
top: -6px;
transform: rotate(10deg);
}
.loginbutton{
border: 3px solid white;
font-weight: bold;
background-color: #5072A7;
width: 15%;
height: 30px;
position: absolute;
right: 20px;
color: white
}
<div id="loginbox">
<p id="heding">Enter the system</p>
<p class="necessery"> It is necessery to log in Your account in order to sign in for a course.</p>
<div id="register">
<div class="reg-hud">
ARE YOU NEW? <a href="#"><span class="f-blue">REGISTER</span></a>
</div>
<form>
<input type="text" name="username" placeholder="User name">
<input type="email" name="email" placeholder="Email">
<input type="passowrd" name="pass" placeholder="Password">
<input type="password" name="pass" placeholder="Confirm Password">
<input type="submit" id="reg-submit" name="submit" value="Register">
</form>
</div>
<div id="login">
<div class="log-hud">
ALREADY A STUDENT? LOGIN
</div>
<form>
<div class="login-div">
<input type="text" name="username" placeholder="User name">
<input type="password" name="password" placeholder ="Password">
<label class="custom-checkbox">
<input type="checkbox" />
<span class="helping-el"></span>
<span class="span3">Remember me?</span>
</label>
<input type="submit" name="register" value="Login" class="loginbutton">
</div>
</form>
</div>
</div>
My desired result is something like this :https://imgur.com/a/ICeuVUM
解决方案
推荐阅读
- c# - 实体框架 6 中的更新数据库命令不起作用
- javascript - JavaScript 生成器及其原型链
- android - ViewModel 正在为 recyclerview 复制项目
- mysql - 按客户选择,他最近的订单中最贵的产品名称
- reactjs - 使用 React 重定向到另一条路线
- postgresql - 无法找到或构造 Param[shapeless.::[String,shapeless.::[io.circe.Json,shapeless.HNil]]]
- oracle - PL/SQL 语句被忽略
- excel - VBA Excel在多行中水平对齐图片
- typescript - 如何在 `UploadedFile | 上进行模式匹配 上传文件[]`
- javascript - 将访问令牌与 Reactjs 前端一起使用