html - 中的第二个文本转到另一行
问题描述
如何在一行中显示“确认密码”?
我添加了一个<span id="confirm">Confirm Password</span>
,我这样做了,不起作用:
#confirm {
display: inline;
}
* {
margin: 0px;
padding: 0px;
}
body {
background-color: Royalblue; /*#f0f0f0;*/
}
.head {
text-align: center;
border: 1px solid #B0C4DE;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;
background: rgba(0, 250, 0, 0);
color: #FFFACD;
font-family: 'Cinzel', sans-serif;
font-size:30px;
}
.content {
position:relative;
top:8px;
width: 30%;
margin: 50px
auto 0px;
}
form {
position: relative;
margin-top: 0;
margin-left: 0;
width: 89%;
height: 300px;
padding: 20px;
border: 1px solid #B0C4DE;
background: rgba(0, 250, 0, 0);
border-radius: 0px 0px 10px 10px;
}
label {
position: relative;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
z-index: -1;
border: 0;
color: white;
left: -65%;
top: -30px;
}
.username {
position: relative;
top: 65px;
}
.password {
position: relative;
top: 130px;
}
.con-pass {
position: relative;
top: 195px;
}
#confirm {
display: inline;
}
input {
position: absolute;
font-family: 'Montserrat', sans-serif;
border: 0;
border-bottom: 2px solid beige;
background: transparent;
font-size: 15px; /*BORDER yes/no*/
height: 25px;
width: 250px;
outline: 0;
z-index: 1;
left: -74px;
top: -30px;
}
span {
position: absolute;
top: 5px;
left: -6px;
transition: top .5s ease, font-size .5s ease;
}
input:focus + label > span,
input:valid + label > span {
top: -20px;
font-size: 11px;
/* padding-bottom: 15px;*/
}
label::after {
content: '';
position: absolute;
top: 27px; /* ::after position */
left: -7px;
width: 250px;
height: 23px;
border-radius: 2px;
transition: transform .3s;
}
label::after {
z-index: -1;
background: beige; /*#a86bf;*/
transform: scale3d(1, 0, 1);
transform-origin: top;
}
input:focus + label::after,
input:valid + label::after {
transform: scale3d(1, -1.3, 1);
transition-timing-function: linear;
top: 27px; /* ::after position */
}
input:focus {
border-radius: 2px;
}
<div class="content">
<p class="head">Register</p>
<form>
<div class="content">
<div class="email">
<input type="text" id="email" required /> <!--input field-->
<label for="email"><span>Email</span></label>
</div>
<div class="username">
<input type="text" id="user" required />
<label for="user"><span>Username</span></label>
</div>
<div class="password">
<input type="text" id="pass" required /> <!--input field-->
<label for="pass"><span>Password</span></label>
</div>
<div class="con-pass">
<input type="text" id="c-pass" required />
<label for="c-pass"><span id="confirm">Confirm Password</span></label>
</div>
</div>
</form>
</div>
解决方案
推荐阅读
- amazon-web-services - Javascript - Cannot initialize a AWS Textract object with AWS-SDK
- javascript - 仅在类悬停时添加 javascript 脚本
- android - 如何在本地存储具有复杂结构的 Google Cloud Firestore 数据?
- flutter - 使容器增长到适合列中兄弟的宽度
- javascript - 如何添加承诺以使 $.when 和 .then 正常运行?
- powershell - 如何根据Jenkinsfile将powershell变量从一个会话传递到另一个会话或从一个阶段传递到另一个阶段
- electron - 构建在具有相同 win10 操作系统和 64 位处理器的机器上看起来不同
- postgresql - 如何将 psql 脚本变量替换为查询中的字符串,以便无论是否设置变量都不会失败
- webpack - 如何在带有 webpack 的 sass 中使用散列 url?
- javascript - 如何在 ionic 4 中使用 alertcontroller 返回承诺?