行列構造の順序付きリスト

Question

順序付きリストを垂直方向にも水平方向にも作成するには？

このリストは動的に生成されるとします。私は手動で選択ボックスと共に数字を入力することはできません。

最初の5番目の値は2番目の列の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>

私は第六選択ボックスが第一と同じ行に表示されるようにする方法を知りません。 どのような提案も素晴らしいでしょう！

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>