css - 具有矩阵结构的有序列表

Question

如何创建垂直和水平的有序列表？ Desired Output

假设这个列表是动态生成的。所以我不能手动输入数字和选择框。

前 5 个值应该显示在第一列，第 6-10 个值显示在第二列，依此类推(3*5 矩阵)。有没有办法用计数器做到这一点？

select {
  padding: 5px;
  border: 2px solid #ccc;
  -webkit-border-radius: 5px;
  border-radius: 2px;
  width: 150px;
  height: 34px;
}

<ol>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>

</ol>

我不知道如何让第 6 个选择框与第 1 个选择框出现在同一行。任何建议都会很棒!

Answer 1

使用列数

ol {
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
}

select {
  padding: 5px;
  border: 2px solid #ccc;
  -webkit-border-radius: 5px;
  border-radius: 2px;
  width: 150px;
  height: 34px;
}

ol {
  column-count: 3;
  -webkit-column-count: 3;
  column-gap: 60px;
  -webkit-column-gap: 60px;
}

<ol>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>
  <li><select class="form-control">
  <option>Alpha</option>
  <option selected>Alphanumeric</option>
  <option>Numeric</option>
  <option>Constant Values</option>
  </select></li>

</ol>