带有矩阵结构的有序列表

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

使用column-count

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;