CSS Distribute more than 2 lines, unlimited number of elements

Question

I want my li to be distributed on two lines as follows:

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

My CSS is very bad, so I don’t know how to do this, and can’t find anything on it ... I tried some things with even and odd elements, but I can’t figure out how to get even points below the odd elements.

Answer 1

You can use the :nth-child selector to select odd elements in these list items.

Here is an example:

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 script

Answer 2

You can use flexbox to achieve this order. Support is pretty good ( http://caniuse.com/#feat=flexbox ), but you will need to provide backups for older versions of 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>