我有一个div #login_container
,其中我有另一个div #login
,他们都在另一个div #block_2
内。 border
周围的#login_container
一切正常,但是,当我删除其边框时,其子div(即#login
)会丢失其边距,其所有文本和其他内容都会触及#login_container
。我只是在学习HTML和CSS,请纠正我,如果我错了,请帮助我如何让#login
div保留其余量。谢谢。
.html的片段:
<div id="block_2">
<div id="login_container" class="div">
<div id="login">
<p>Email Address</p>
<input type="text">
<p>Password</p>
<input type="password">
<p>Password</p>
<input type="password">
<p><input type="checkbox" name="agreement">I have read and agree to the terms of service</input></p>
</div>
</div>
</div>
.css的片段:
#block_2 {
width: 1120px;
margin: 0px auto;
}
#login_container {
width: 400px;
height: 400px;
margin: 0px 600px;
border-radius: 30px;
}
.div {
background:rgb(0,0,0);
background: transparent\9;
background:rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c00 0000);
zoom: 1;
}
.div:nth-child(n) {
filter: none;
}
#login {
width: 350px;
margin: 20px auto;
}
#login_container p, input{
font-weight: bold;
font-style: italic;
margin: 10px;
color: white;
font-size: 20px;
}
答案 0 :(得分:0)
http://jsbin.com/azudAzO/1/edit
#block_2 {
width: 1120px;
margin: 0px auto;
}
#login_container {
position:relative;
left:600px;
width: 400px;
height: 400px;
border-radius: 30px;
padding:20px 35px;
}
.div {
background:rgb(0,0,0);
background: transparent\9;
background:rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c00 0000);
zoom: 1;
}
.div:nth-child(n) {
filter: none;
}
#login {
width: 350px;
}
#login_container p, input{
font-weight: bold;
font-style: italic;
color: white;
font-size: 20px;
}