Cách khắc phục khoảng cách giữa các phần tử trong biểu mẫu?

Question

Biểu mẫu flexbox có khoảng cách giữa các mục biểu mẫu khi có nút radio hoặc hộp kiểm. Có tùy chọn nào để tránh khoảng trống cho dù sử dụng flex hay phương pháp nào khác không?

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

Bạn có thể sử dụng column cho việc này. kiểm tra cập nhật đoạn mã dưới đây

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>