帶矩陣結構的有序列表

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>