html - CSS Distribute li over 2 rows, unlimited items -
html - CSS Distribute li over 2 rows, unlimited items -
i want li's distributed on 2 rows this:
item 1 item 3 item 5 item 7 item 9 .... item 2 item 4 item 6 item 8 ......
my css bad have no clue on how accomplish , can't find on this... tried stuff , odd items, can't figure out how forcefulness items below odd items.
you can utilize :nth-child
selector select odd elements in list items.
here 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 per width of first element */ }
working fiddle
html css list
Comments
Post a Comment