फ़ॉर्म में तत्वों के बीच अंतर को कैसे ठीक किया जाए?

Question

flexbox फॉर्म में रेडियो बटन या चेकबॉक्स होने पर फॉर्म आइटम के बीच अंतर होता है। क्या फ्लेक्स या किसी अन्य विधि का उपयोग कर अंतर से बचने के लिए कोई विकल्प है?

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 उपयोग कर सकते हैं। केवल तत्वों आप की जरूरत करने के लिए 1: नीचे

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>