List items left to right and spaced properly
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have some list items, typically as you know they go top to bottom, i have a need for them to look like they are in columns so I had an idea to do display:line; which works to lay them out but now i need to assign a width to them so they end up looking like 200px wide columns. I cant seem to apply a width to this element or maybe I'm missing something.

Ideally we end up with a css solution that works cross browser but if we need js then lets do it

here is my sample test page

Might be important to note, this will be in a bootstrap repsonsive page so the list will get bigger and smaller and ideally it can handle this by throwing things to the next line as they get squished.

awarded to Balack Huynh

Crowdsource coding tasks.

1 Solution

Winning solution

Dear you!
if this is what you need

My solution:


perfect, I knew i was missing something.
Qdev 8 years ago
change display:inline --> block and use float:left to distribution colum, li:after{ clear:both; }/last li will to clear float left/
Balack Huynh 8 years ago