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

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -