Geordnete Liste mit Matrixstruktur

Question

Wie erstellt man eine geordnete Liste sowohl vertikal als auch horizontal? Desired Output

Nehmen wir an, diese Liste wird dynamisch generiert.So kann ich die Zahlen nicht zusammen mit dem Auswahlfeld eingeben.

Die ersten 5 Werte sollten in der ersten Spalte angezeigt werden, 6-10 in der zweiten Spalte und so weiter (3 * 5 Matrix). Gibt es eine Möglichkeit, dies mit Zählern zu tun?

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>

Ich weiß nicht, wie das sechste Auswahlfeld in der gleichen Zeile wie die 1. erscheinen zu lassen. Irgendwelche Vorschläge wären großartig!

Answer 1

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