有人能帮我纠正一个问题吗?我想在两个div之间设置间距,但这样做会将两个div一起移动。我的代码如下:
@charset "utf-8";
/* CSS Document */
* {
box-sizing: border box;
}
body {
background-image: url(../images/nature_beach-1280x800.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
margin: 0;
}
html {
height: 100%;
}
#container {
background-color: rgba(255, 255, 255, .50);
height: 65%;
width: 30%;
box-sizing: border-box;
transform: translate(200%, 20%);
font-family: Myriad Pro;
font-size: 20px;
}
#login {
text-align: center;
padding: 5%;
font-weight: bold;
}
#form {
margin-top: 5%;
margin-left: 10%;
}
.textfield {
height: 25px;
width: 250px;
background-color: rgba(109, 207, 246, .50);
border: none;
}
.fieldname {
float: left;
}
.textbox {
float: right;
margin-right: 10%
}
#container2 {
/*What should I put here??*/
}
<div id="container">
<div id="login">
Login
</div>
<div id="form">
<div id="container1">
<span class="fieldname">Username</span>
<span class="textbox"><input class="textfield" type="text" /></span>
</div>
<div id="container2">
<span class="fieldname">Password</span>
<span class="textbox"><input class="textfield" type="text" /></span>
</div>
</div>
</div>
请帮我解决这个问题。 演示链接
translate()
来定位,而不是使用内置的 CSS 定位规则呢? - Ken Bellowspadding-top: 60px;
,50及以上应该有效。 - Pugazh