以网格格式显示复选框

Question

我想以 3 列的网格格式显示复选框。如下所示

Item1 Item2 Item3
Item Item5 Item6
4
Item7 Item8 Item9

我可以使用以下代码以网格格式显示它，但是对于 Item7，它没有正确定位，而是开始显示在 Item5 下面。我不想。

下面是我正在使用的代码

<div class="row" style="margin-top: 15px; padding-bottom: 15px; margin-left: 5px">
 <div class="col-md-4 ef-batch-options-text checkbox" ng-repeat="x in samples">
       <input type="checkbox" id="user" name="users" value="{{x}}"  />
             {{x}}
 </div>

我也尝试用 ul 和

Answer 1

你可以使用flexbox 请注意，您应该避免使用内联样式！创建一个 style.css 文件，link 使用 <link rel="stylesheet" href="style.css"> 并粘贴以下代码：

.row {
margin-top: 15px;
padding-bottom: 15px;
margin-left: 5px
display: flex;
flex-wrap: wrap;
flex-basis: 33%;
}

Answer 2

尝试Bootstrap grid method,

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item1
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item2
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item3
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item4
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item5
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item6
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item7
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item8
 </div>
  <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item9
 </div>
</div>

Answer 3

form {
  width: 60px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}

<form>
  <label>
    <input type="checkbox" value=""/>item1
  </label>
  <label>
    <input type="checkbox" value=""/>item2
  </label>
  <label>
    <input type="checkbox" value=""/>item3
  </label>
  <label>
    <input type="checkbox" value=""/>item4
  </label>
  <label>
    <input type="checkbox" value=""/>item5
  </label>
  <label>
    <input type="checkbox" value=""/>item6
  </label>
  <label>
    <input type="checkbox" value=""/>item7
  </label>
  <label>
    <input type="checkbox" value=""/>item8
  </label>
  <label>
    <input type="checkbox" value=""/>item9
  </label>
</form>

以网格格式显示复选框

display checkboxes in grid format

html

css

angularjs