css - Is there a way to break a list into columns? -

my webpage has 'skinny' list: example, list of 100 items of 1 word in length each. reduce scrolling, want present list in 2 or 4 columns on page. how should css?

<ul>      <li>item</li>      <li>item</li>      <li>item</li>      <li>item</li>      <li>item</li>      <li>item</li>      <li>item</li>      <li>item</li>      <li>item</li>      <li>item</li>  </ul>

i prefer solution flexible if list grows 200 items, don't have lot of manual adjustments accommodate new list.

the css solution is: http://www.w3.org/tr/css3-multicol/

the browser support you'd expect..

it works "everywhere" except internet explorer 9 or older: http://caniuse.com/multicolumn

ul {     -moz-column-count: 4;     -moz-column-gap: 20px;     -webkit-column-count: 4;     -webkit-column-gap: 20px;     column-count: 4;     column-gap: 20px; } 

see: http://jsfiddle.net/pdexf/

if ie support required, you'll have use javascript, example:

http://welcome.totheinter.net/columnizer-jquery-plugin/

another solution fallback normal float: left only ie. order wrong, @ least similar:

see: http://jsfiddle.net/nj4hw/

<!--[if lt ie 10]> <style> li {     width: 25%;     float: left } </style> <![endif]--> 

you apply fallback modernizr if you're using it.