Menu
I'm using ColdFusion to populate a template that includes HTML unordered lists (<ul>s).
Most of these aren't that long, but a few have ridiculously long lengths and could really stand to be in 2-3 columns.
Is there an HTML, ColdFusion or perhaps JavaScript (I'm accepting jQuery solutions) way to do this easily? It's not worth some over-complicated heavyweight solution to save some scrolling.
832
Create a list with as many list elements as you want. Then enclose the list in a div, setting style=column-width and style=column-gap, to match the information in your list elements. Do not set style=columns. Totally responsive list that adapts to screen size.
This is the simplest way to do it. CSS only. add width to the ul element. add display:inline-block and width of the new column (should be less than half of the ul width).
If Safari and Firefox support is good enough for you, there is a CSS solution:
ul { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 2em; -moz-column-gap: 2em; column-gap: 2em; } I'm not sure about Opera.
34
So I dug up this article from A List Apart CSS Swag: Multi-Column Lists. I ended up using the first solution, it's not the best but the others require either using complex HTML that can't be generated dynamically, or creating a lot of custom classes, which could be done but would require loads of in-line styling and possibly a huge page.
Other solutions are still welcome though.
173
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
