如何修復表單中元素之間的空隙？

Question

當有單選按鈕或複選框時，flexbox表單在表單項之間存在空隙。是否有任何選擇來避免使用flex或其他方法的差距？

form { 
 
    width: 100%; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
} 
 

 
form>div { 
 
    box-sizing: border-box; 
 
    padding: 0.5rem; 
 
    -ms-flex-preferred-size: 50%; 
 
    flex-basis: 50%; 
 
} 
 

 
form>div input:not([type=checkbox]):not([type=radio]), 
 
form>div textarea { 
 
    background-color: rgba(0, 0, 0, 0.1); 
 
    border: 1px solid rgba(0, 0, 0, 0.1); 
 
    padding: 0.25rem; 
 
    min-height: 40px; 
 
    width: 100%; 
 
}

<form> 
 
    <div><input placeholder="First Name" /></div> 
 
    <div><input placeholder="Last Name" /></div> 
 
    <div> 
 
    <ul class="radio_list"> 
 
     <li><input name="form" type="radio" value="0">&nbsp;<label>Male</label></li> 
 
     <li><input name="form" type="radio" value="1">&nbsp;<label>Female</label></li> 
 
     <li><input name="form" type="radio" value="2">&nbsp;<label>gfdg</label></li> 
 
     <li><input name="form" type="radio" value="3">&nbsp;<label>gfdg</label></li> 
 
     <li><input name="form" type="radio" value="4">&nbsp;<label>gfd</label></li> 
 
    </ul> 
 
    </div> 
 
    <div><input placeholder="Phone" type="phone" /></div> 
 
    <div><input placeholder="Email" type="email" /></div> 
 
    <div> 
 
    <ul class="checkbox_list"> 
 
     <li><input name="form_3" type="checkbox" value="0" checked="checked" required="required">&nbsp;<label>Checkbox 1</label></li> 
 
     <li><input name="form_3" type="checkbox" value="1" checked="checked">&nbsp;<label>Checkbox 2</label></li> 
 
     <li><input name="form_3" type="checkbox" value="2" checked="checked">&nbsp;<label>Checkbox 3</label></li> 
 
    </ul> 
 
    </div> 
 
    <div><textarea rows="4" cols="30" placeholder="Coment"></textarea></div> 
 
</form>

Answer 1

您可以使用column這一點。檢查以下

form { 
 
    width: 100%; 
 
    float: left; 
 
    -webkit-column-count: 2; 
 
    -moz-column-count: 2; 
 
    column-count: 2; 
 
    column-gap: 0.5rem; 
 
} 
 
form > div { 
 
    box-sizing: border-box; 
 
    margin-bottom: 0.5rem; 
 
    break-inside: avoid; 
 

 
} 
 
form > div input:not([type=checkbox]):not([type=radio]), 
 
form > div textarea { 
 
    background-color: rgba(0, 0, 0, 0.1); 
 
    border: 1px solid rgba(0, 0, 0, 0.1); 
 
    padding: 0.25rem; 
 
    min-height: 40px; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
}

<form> 
 
    <div><input placeholder="First Name" /></div> 
 
    <div><input placeholder="Last Name" /></div> 
 
    <div> 
 
    <ul class="radio_list"> 
 
     <li><input name="form" type="radio" value="0">&nbsp;<label>Male</label></li> 
 
     <li><input name="form" type="radio" value="1">&nbsp;<label>Female</label></li> 
 
     <li><input name="form" type="radio" value="2">&nbsp;<label>gfdg</label></li> 
 
     <li><input name="form" type="radio" value="3">&nbsp;<label>gfdg</label></li> 
 
     <li><input name="form" type="radio" value="4">&nbsp;<label>gfd</label></li> 
 
    </ul> 
 
    </div> 
 
    <div><input placeholder="Phone" type="phone" /></div> 
 
    <div><input placeholder="Email" type="email" /></div> 
 
    <div> 
 
    <ul class="checkbox_list"> 
 
     <li><input name="form_3" type="checkbox" value="0" checked="checked" required="required">&nbsp;<label>Checkbox 1</label></li> 
 
     <li><input name="form_3" type="checkbox" value="1" checked="checked">&nbsp;<label>Checkbox 2</label></li> 
 
     <li><input name="form_3" type="checkbox" value="2" checked="checked">&nbsp;<label>Checkbox 3</label></li> 
 
    </ul> 
 
    </div> 
 
    <div><textarea rows="4" cols="30" placeholder="Coment"></textarea></div> 
 
</form>