当有单选按钮或复选框时,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"> <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>
最佳答案
您可以为此使用列
。检查下面更新的代码段
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"> <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>
关于html - 如何修复表单中元素之间的差距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46220047/