Is it possible to turn a one-column unordered list into a two column unordered list withjQuery/CSS?

Basically, I want to turn the first 'Categories' list of the screenshot below into something like the second 'Categories' list (two columns):

Is it possible to archieve this with jQuery or 开发者_JS百科CSS?

You can do this easily by floating your list items left and setting a width on both the ul and the lis

demo: http://jsfiddle.net/wesbos/dcqdr/

With CSS3 you can create multiple columns very easily.

   ul{
    -moz-column-count: 2; -moz-column-gap: 10px;
    -webkit-column-count: 2; -webkit-column-gap: 10px;
    column-count: 2; column-gap: 10px;
    }

Here is a sample: http://jsfiddle.net/ESPUU/

I set up an example here.

http://jsfiddle.net/3Jbnf/

Basically, you can determine how many columns you'd like by setting the width of the un-ordered list (ul) and dividing that by how many you want.

The example I set up currently has two columns, 250px for the ul and 125px for each li item. 250 / 125 = 2.

EDIT: Wes beat me to it.

Well yes. Put all items objects into array with $(el).each(). Delete this element, then with for output 2 lists: From X to Y, from Y to Z.