無法在表單元素之間添加頁邊距

我嘗試創建表單並在類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

無法在表單元素之間添加頁邊距

回答

相關問題