Question

我尝试创建一个表单，并在类formGroup中的表单元素之间添加一些边距作为margin 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;
}

谢谢

Answer 1

您只是将保证金底部放在错误的位置。它应该在formField中。

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

您需要清除.formGroup元素中包含的浮点数，当前.formGroup没有高度，因此应用的任何边距都会被其中的子项的高度吞没。

将其放在.formGroup选择器

上

overflow: hidden;
margin: 10px 0;

请参阅此示例：https://jsfiddle.net/yuqvu6w4/1/

Answer 3

你只需要添加＆＃34;溢出：隐藏＆＃34;到你的班级＆＃34; .registrationForm .form .formGroup＆＃34; 你的最终代码将是：

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

它可以在不中断其他代码的情况下工作

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

3 个答案: