无法在表单元素之间添加页边距

我尝试创建表单并在类formGroup中的表单元素之间添加一些页边距作为页边距10px 0; 但它不工作，我不知道为什么会发生这种情况。我感谢您的帮助。下面是HTML无法在表单元素之间添加页边距

<div class="registrationForm"> 
<h2>Please fill in the form below to register</h2> 
<form class="form"> 
<div class="formGroup"> 
    <label class="formLabel">First Name</label> 
    <div class="formField"> 
     <input type="text"> 
    </div> 
</div> 

<div class="formGroup"> 
    <label class="formLabel">Last Name</label> 
    <div class="formField"> 
     <input type="text"> 
    </div> 
</div> 

<div class="formGroup"> 
    <label class="formLabel">Email Address</label> 
    <div class="formField"> 
     <input type="text"> 
    </div> 
</div> 

<div class="formGroup"> 
    <label class="formLabel">Password</label> 
    <div class="formField"> 
     <input type="text"> 
    </div> 
</div> 

<div class="formGroup"> 
    <label class="formLabel">Phone</label> 
    <div class="formField"> 
     <input type="text"> 
    </div> 
</div> 

<div class="formGroup"> 
    <label class="formLabel">Gender</label> 
    <div class="formField"> 
     <input type="text"> 
    </div> 
</div> 

<div class="formGroup"> 
    <label class="formLabel">Date of birth</label> 
    <div class="formField"> 
     <input type="text"> 
    </div> 
</div> 

<div class="formGroup"> 
    <label class="formLabel"></label> 
    <div class="formField"> 
     <input type="submit"> 
    </div> 
</div> 
</form> 
</div>

和CSS这里

.registrationForm 
{ 
background-color: #FFF; 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
padding: 3% 5%; 
margin-bottom: 3%; 
overflow: auto; 
} 

.registrationForm .form 
{ 
margin: 10px auto; 
width: 90%; 
//border: 1px solid black; 
overflow: auto; 
} 

.registrationForm .form .formGroup 
{ 
width: 100%; 
margin: 10px 0; 
} 

.registrationForm .form .formGroup .formLabel 
{ 
width: 20%; 
float: left; 
//text-align: right; 
} 

.registrationForm .form .formGroup .formField 
{ 
width: 80%; 
float: left; 
}

谢谢

来源

2015-09-06 Kilvish Shakal

需要清除包含您的.formGroup元素中的彩车，目前.formGroup没有高度，使应用的任何保证金是由其中的儿童的身高吞噬。

将这个您.formGroup选择

overflow: hidden; 
margin: 10px 0;

见这个例子：https://jsfiddle.net/yuqvu6w4/1/

来源

2015-09-06 11:11:15

这工作得很好。谢谢！漂浮经常让我困惑，你能提出一个很好的指导，我可以在这里学到更多关于漂浮的知识吗？ –

@KilvishShakal https://css-tricks.com/all-about-floats/请参阅“大崩溃”部分，它解释了您在这里发生的事情。 –

你只是把下边距错了地方。它应该在formField中。

.registrationForm 
 
{ 
 
background-color: #FFF; 
 
border-radius: 5px; 
 
-moz-border-radius: 5px; 
 
-webkit-border-radius: 5px; 
 
padding: 3% 5%; 
 

 
overflow: auto; 
 
} 
 

 
.registrationForm .form 
 
{ 
 
margin: 10px auto; 
 
width: 90%; 
 
//border: 1px solid black; 
 
overflow: auto; 
 
} 
 

 
.registrationForm .form .formGroup 
 
{ 
 
width: 100%; 
 
} 
 

 
.registrationForm .form .formGroup .formLabel 
 
{ 
 
width: 20%; 
 
float: left; 
 
//text-align: right; 
 
} 
 

 
.registrationForm .form .formGroup .formField 
 
{ 
 
width: 80%; 
 
float: left; 
 
margin-bottom: 3%; 
 
}

<div class="registrationForm"> 
 
<h2>Please fill in the form below to register</h2> 
 
<form class="form"> 
 
<div class="formGroup"> 
 
    <label class="formLabel">First Name</label> 
 
    <div class="formField"> 
 
     <input type="text"> 
 
    </div> 
 
</div> 
 

 
<div class="formGroup"> 
 
    <label class="formLabel">Last Name</label> 
 
    <div class="formField"> 
 
     <input type="text"> 
 
    </div> 
 
</div> 
 

 
<div class="formGroup"> 
 
    <label class="formLabel">Email Address</label> 
 
    <div class="formField"> 
 
     <input type="text"> 
 
    </div> 
 
</div> 
 

 
<div class="formGroup"> 
 
    <label class="formLabel">Password</label> 
 
    <div class="formField"> 
 
     <input type="text"> 
 
    </div> 
 
</div> 
 

 
<div class="formGroup"> 
 
    <label class="formLabel">Phone</label> 
 
    <div class="formField"> 
 
     <input type="text"> 
 
    </div> 
 
</div> 
 

 
<div class="formGroup"> 
 
    <label class="formLabel">Gender</label> 
 
    <div class="formField"> 
 
     <input type="text"> 
 
    </div> 
 
</div> 
 

 
<div class="formGroup"> 
 
    <label class="formLabel">Date of birth</label> 
 
    <div class="formField"> 
 
     <input type="text"> 
 
    </div> 
 
</div> 
 

 
<div class="formGroup"> 
 
    <label class="formLabel"></label> 
 
    <div class="formField"> 
 
     <input type="submit"> 
 
    </div> 
 
</div> 
 
</form> 
 
</div>

来源

2015-09-06 11:10:59

http://jsfiddle.net/RachGal/d49v8bqa/ –

但是，在这种情况下，我们正在为下边距来formField这是一个文本字段，没有工作标签边缘。它确实有用，但这是一个好习惯吗？ –

它作为替代品的良好实践，它具有相同的效果 –

你只需要添加 “溢出：隐藏” 你的课 “.registrationForm .FORM .formGroup” 您的最终代码将为：

.registrationForm .form .formGroup { 
    width: 100%; 
    margin: 10px 0; 
    **overflow: hidden;** 
}

将不中断其他代码

来源

2016-02-23 12:43:58

无法在表单元素之间添加页边距

回答

相关问题