Question

当有单选按钮或复选框时，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">&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。查看下面的更新代码段

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>

Answer 2

使用CSS网格check out the fiddle

注意：我还重新排列了div复选框

form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 10px;
}

您可以使用CSS网格指定rowpan和colspan

.span-col {
  grid-column: span 2
}

.span-row {
  grid-row: span 2;
}

我已将 span-col 类添加到textarea div中，如果删除该类，它将在2列中对齐。

详细了解：CSS Grid

如何修复表单中元素之间的差距？

2 个答案: