need to build li in 2 columns. tried the property
ul{columns:2}
but columns are obtained
sixteen
2 7
3 8
4 9
5 10

I need
12
3 4
5 6
7 8
9 10

if you add

 li{ display: inline-block; width: 500px; }

they are lined up but with decreasing scale the number of columns increases
tried this:

 li:nth-child(even):after{ content:"\A"; white-space:normal; }

getting the same

    2 answers 2

    Option 1

     * { box-sizing: border-box; } ol { counter-reset: count; padding: 0; display: flex; flex-wrap: wrap; } ol>li { list-style: none; width: 50%; border: 1px solid #ccc; } ol>li:before { counter-increment: count; content: counter(count) " "; } 
     <ol> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol>

    Option 2

     * { box-sizing: border-box; } ol { counter-reset: count; padding: 0; } ol:after { content: ''; display: table; clear: both; line-height: 0; } ol>li { list-style: none; float: left; width: 50%; border: 1px solid #ccc; } ol>li:before { counter-increment: count; content: counter(count) " "; } ol>li:nth-of-type(2n + 3) { clear: left; } 
     <ol> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol>

    • it seems to work, but it is necessary that while decreasing the scale, the elements are not stretched - axmed2004
    • made ul {width: 1000 px;} so it goes - axmed2004

    flex:

     ul { list-style-type: none; padding: 0; margin: 0; display: flex; flex-flow: row wrap; } li { width: 50%; } 
     <ul> <li>item-1</li> <li>item-2</li> <li>item-3</li> <li>item-4</li> <li>item-5</li> <li>item-6</li> <li>item-7</li> <li>item-8</li> <li>item-9</li> <li>item-10</li> </ul>