带矩阵结构的有序列表

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>

我不知道如何使第六届选择框出现在同一行1英寸 任何建议都会很棒！

Answer 1

使用column-count

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>