CSS Distribuire li oltre 2 righe, oggetti illimitati

Question

voglio del mio Li da distribuiti su 2 file in questo modo:

item 1 item 3 item 5 item 7 item 9 .... 
item 2 item 4 item 6 item 8 ...... 

mio CSS è davvero pessimo, quindi non ho idea su come raggiungere questo obiettivo e puo' Ho trovato qualcosa su questo ... Ho provato alcune cose con oggetti pari e dispari, ma non riesco a capire come forzare anche gli oggetti sotto gli oggetti dispari.

Answer 1

È possibile utilizzare il selettore :nth-child per selezionare elementi dispari negli elementi dell'elenco.

Ecco un esempio:

CSS

ul { 
    position: relative; 
    white-space: nowrap; 
} 
li { 
    display: inline-block; 
    list-style-type: none; 
    padding: 0px 5px; 
} 
li:nth-child(2n) { 
    top: 100%; 
    position: absolute; 
    margin-left: -36px; /* Changes as per the width of the first element */ 
} 

Working Fiddle

Answer 2

È possibile utilizzare flexbox per raggiungere questo ordinamento. Il supporto è abbastanza buono (http://caniuse.com/#feat=flexbox) ma sarà necessario fornire fallback per le versioni precedenti di IE.

ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 100px; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width:200px; 
 
} 
 
li { 
 
    color: #000000; 
 
    height: 50px; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100px; 
 
}

<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> 
 
</ul>