个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试为 3 个输入表单设置漂亮的底部边距间距。
但我不确定为什么其他元素会堆叠在一起。
我已经设置了所有 3 <div class="group">相对的，我期待它们里面的内容被设置为 position:absolute;绝对显示在各自的容器中。
Here , .group显示正常:
.group {
position: relative;
top: 60px;
left: 0%;
margin-bottom: 30px;
color: white;
}
在下面，不工作:
body {
background-color: Royalblue; /*#f0f0f0;*/
margin: 0px;
}
form {
position: relative;
top: 50px;
left: 37%;
width: 280px;
height: 300px;
border: 1px solid #B0C4DE;
background: royalblue;
border-radius: 0px;
}
.group {
position: relative;
top: 60px;
left: 12%;
margin-bottom: 30px;
}
/* Main EFFECT ================================ */
input {
position: absolute;
top: 0px;
left: 0px;
font-family: monospace; /*'Montserrat', sans-serif;*/
border: 0;
border-bottom: 1.5px solid beige;
background: transparent;
font-size: 15px; /*BORDER yes/no*/
height: 25px;
width: 200px;
outline: 0;
z-index: 1;
color: black;
}
span {
position: absolute;
top: 0px;
left: 0px;
font-family: monospace; /*'Montserrat', sans-serif;*/
font-size: 17px;
z-index: 1;
color: white;
transition: top .5s ease, font-size .5s ease;
}
label::after {
content: '';
position: absolute;
top: 6px; /* ::after position */
left: 0px;
width: 200px;
height: 23px;
border-radius: 2px;
background: beige; /*#a86bf;*/
transition: transform .7s;
transform: scale3d(1, 0.08, 1);
transform-origin: bottom;
}
input:focus + label::after,
input:valid + label::after {
top: 6px;
transform: scale3d(1, 1.3, 1);
transition-timing-function: linear;
/* ::after position */
}
input:focus + label > span,
input:valid + label > span {
top: -20px;
font-size: 11px;
/* padding-bottom: 15px;*/
}<body>
<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="group">
<input type="text" id="user" required />
<label for="user"><span>Username</span></label>
</div>
<div class="group">
<input type="text" id="pass" required />
<label for="pass"><span>Password</span></label>
</div>
<div class="group">
<input type="text" id="c-pass" required />
<label for="c-pass"><span>Confirm Password</span></label>
</div>
</form>
</div>
</body>最佳答案
你试过这样做吗？
body {
background-color: Royalblue; /*#f0f0f0;*/
margin: 0px;
}
form {
position: relative;
top: 50px;
left: 37%;
width: 280px;
height: 300px;
border: 1px solid #B0C4DE;
background: royalblue;
border-radius: 0px;
}
.group {
position: relative;
left: 12%;
}
.grp1{
top: 60px;
}
.grp2{
top: 110px;
}
.grp3{
top: 160px;
}
.grp4{
top: 210px;
}
/* Main EFFECT ================================ */
input {
position: absolute;
top: 0px;
left: 0px;
font-family: monospace; /*'Montserrat', sans-serif;*/
border: 0;
border-bottom: 1.5px solid beige;
background: transparent;
font-size: 15px; /*BORDER yes/no*/
height: 25px;
width: 200px;
outline: 0;
z-index: 1;
color: black;
}
span {
position: absolute;
top: 0px;
left: 0px;
font-family: monospace; /*'Montserrat', sans-serif;*/
font-size: 17px;
z-index: 1;
color: white;
transition: to .5s ease, font-size .5s ease;
-webkit-transition: top .5s ease, font-size .5s ease;
-moz-transition: top .5s ease, font-size .5s ease;
-ms-transition: top .5s ease, font-size .5s ease;
}
label::after {
content: '';
position: absolute;
top: 6px; /* ::after position */
left: 0px;
width: 200px;
height: 23px;
border-radius: 2px;
background: beige; /*#a86bf;*/
transition: transform .7s;
-webkit-transition: transform .7s;
-moz-transition: transform .7s;
-ms-transition: transform .7s;
transform: scale3d(1, 0.08, 1);
-webkit-transform: scale3d(1, 0.08, 1);
-ms-transform: scale3d(1, 0.08, 1);
-moz-transform: scale3d(1, 0.08, 1);
transform-origin: bottom;
-webkit-transform-origin: bottom;
-moz-transform-origin: bottom;
-ms-transform-origin: bottom;
}
input:focus + label::after,
input:valid + label::after {
top: 6px;
transform: scale3d(1, 1.3, 1);
-webkit-transform: scale3d(1, 1.3, 1);
-moz-transform: scale3d(1, 1.3, 1);
-ms-transform: scale3d(1, 1.3, 1);
transition-timing-function: linear;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
/* ::after position */
}
input:focus + label > span,
input:valid + label > span {
top: -20px;
font-size: 11px;
/* padding-bottom: 15px;*/
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<title>Test</title>
</head>
<body>
<form>
<div class="group grp1">
<input type="text" id="email" required /> <!--input field-->
<label for="email"><span>Email</span></label>
</div>
<div class="group grp2">
<input type="text" id="user" required />
<label for="user"><span>Username</span></label>
</div>
<div class="group grp3">
<input type="text" id="pass" required />
<label for="pass"><span>Password</span></label>
</div>
<div class="group grp4">
<input type="text" id="c-pass" required />
<label for="c-pass"><span>Confirm Password</span></label>
</div>
</form>
</body>
</html>关于html - 其他元素堆叠在一起，我已经将它们的容器设置为位置 :relative;，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52361221/
26
4
0
我知道，关系数据库是一种数据库，其中一个表中的字段链接到其他表中的行，就像这样。 但我不明白这对我作为网络开发人员意味着什么! 据我所知，具有联接和嵌套选择的查询会降低性能(尤其是具有数十个联接的 d
我正在逻辑层面上设计一个数据库，以便稍后将其传递给程序员来交付。我只是粗略地了解它们的工作原理，所以我很难简洁地表达我的问题。这是我的问题: 我有一个名为 MEANINGS 的表。 我有一个名为 WO
在 Jira 中，将项目链接在一起既简单又实用。 例如，您可以轻松克隆一个问题:创建问题 100，将其克隆到 101。100 然后显示“这个问题有一个克隆:101”，然后 101 显示“这个问题是一个
所以我有这些实体: Group { id: number; name: string; persons: Person[]; } Person { name: stri
我真不敢相信，经过 5 年的 Rails 编程，我还没有想出一个好的解决方案来解决这个常见问题。另外，我假设这个特定问题有 100 个答案，但我不知道定义(关系？协会？等)来很好地搜索它。所以我们开始
我想在我的数据库记录中包含动态字段。 例如:我想构建一个应用程序供用户创建自己的表单。 用户可以创建以下表单: 个人资料: 全名 街道 工作 电话 首页 工作 移动 兴趣 兴趣 1 兴趣 2 兴趣 3
共有三个表:businesses、categories、categorizations、 CREATE TABLE businesses ( id SERIAL PRIMARY KEY, na
这个问题在这里已经有了答案: How can I vertically center a div element for all browsers using CSS? (48 个答案) 关闭 6
对于问题的错误措辞，我们深表歉意。我是 stackoverflow 的新手，也是 PIG 的新手，正在尝试自己进行实验。 我有一个处理 words.t 文件和 data.txt 文件的场景。 文字.t
关于像Cassandra 这样的反革命NoSQL 数据库的讨论很多。 , CouchDB , Hypertable , MongoDB , Project Voldemort , BigTable ，
我的处境与ICTylor's post here 类似。 . 所以我有: user1=User.find(1); user2=User.find(2); written=Micropost.where
尝试获取与事件关联的用户列表。这是我 Eloquent 模型: 用户.php: public function fbevents() { $this->belongsToMany('Fbeve
我有一个在 MySQL 数据库上运行的 Web 应用程序(正在开发中)。我正在考虑将我的应用程序迁移到 Google App Engine，并希望更好地了解如何将我的简单关系数据库模型转换为非关系方法
我应该在构造函数中放入什么:与实例相关的东西还是与类相关的东西？ 考虑这段代码: var count = 0 TView = function (x, y) { this.x = x, this.y
我正在努力使用 postgreSQL，因为我不知道如何将 A 类型的一个实例链接到 B 类型的一组实例。我将举一个简短的例子: 假设我们要建立一个包含音乐专辑和人物的数据库，每个人都有一个他们最喜欢的
我需要检索一个对象并获取关系和嵌套关系。 所以，我有以下三个模型: 用户模型: module.exports = { attributes: { name: { type: '
给定一个表定义: Articles: art_id | name -------|-------------- 1 | article1 2 | article2 3
谁能举例说明“em 是相对于字体大小的，% 是相对于父元素的”？ 相对于字体大小和相对于父元素是什么意思？ 最佳答案 考虑一下您是否要在另一个框内定义一个框的高度。如果您将高度指定为 50%，它将是包
我有一个多对多关系，当我加载位于此关系一侧的实体时，我希望将另一侧相关实体的 ArrayCollection 视为其属性。然而，这并没有发生——加载的 ArrayCollection 中没有任何元素，
Relation#update(id, attributes) 文档提到“无论对象是否成功保存到数据库，都会返回结果对象。”，而 Relation#update_all (updates, condi
我是一名优秀的程序员,十分优秀！