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

标签 css html twitter-bootstrap

如何创建垂直和水平的有序列表? 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 个选择框出现在同一行。 任何建议都会很棒!

最佳答案

使用列数

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>

关于css - 具有矩阵结构的有序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43047403/

相关文章:

html - 嵌入式 Vimeo 视频上的 CSS 覆盖不适用于 Firefox 全屏

javascript - Jquery 调整大小问题。当宽度小于 768 宽度时,单击选项启用。 768以上鼠标悬停选项启用

html - div 位于页面中间

css - 为什么 Bootstrap 3 导航栏下拉菜单在 IE8 中不起作用?

ios - 向左滑动返回

列的 Css 属性

css - 我怎样才能在容器流体中拥有我的移动 View ,而在容器中拥有桌面站点?

css - 将 CSS 应用于谷歌地图 iframe

html - Bootstrap 或 css : Center align texts

javascript - 编辑模式下的 HTML 表格自动刷新问题