Formularz flexbox
ma przerwę między elementami formularza, gdy jest przycisk radiowy lub pole wyboru. Czy istnieje jakaś możliwość uniknięcia luki przy użyciu flex lub jakiejkolwiek innej metody?Jak naprawić lukę pomiędzy elementami w formularzu?
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"> <label>Male</label></li>
<li><input name="form" type="radio" value="1"> <label>Female</label></li>
<li><input name="form" type="radio" value="2"> <label>gfdg</label></li>
<li><input name="form" type="radio" value="3"> <label>gfdg</label></li>
<li><input name="form" type="radio" value="4"> <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"> <label>Checkbox 1</label></li>
<li><input name="form_3" type="checkbox" value="1" checked="checked"> <label>Checkbox 2</label></li>
<li><input name="form_3" type="checkbox" value="2" checked="checked"> <label>Checkbox 3</label></li>
</ul>
</div>
<div><textarea rows="4" cols="30" placeholder="Coment"></textarea></div>
</form>
Co o zastosowanie Flex: 1 tylko do elementów trzeba. Podobnie jak pole wprowadzania, textarea, itp. –
możesz zresetować * domyślny * 'margin' i' padding' na zero dla 'ul', który zawiera przycisk radiowy i pole wyboru? – kukkuz