Formdaki öğeler arasındaki boşluk nasıl düzeltilir?

Question

flexbox formunda, radyo düğmesi veya onay kutusu olduğunda form öğeleri arasında boşluk var. Boşluktan kaçınmak için esnek mi yoksa başka bir yöntem mi kullanılmalı?

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

Bunun için column kullanabilirsiniz. Sadece ihtiyacınız öğelerine 1: Esnek uygulamak konusunda ne

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>