Here's some CSS to to display a list in columns.
ul {
display: block;
margin: 0;
padding: 0;
}
li {
display: block;
float: left;
width: 24%; /* 24% will give you four columns */
margin: 5px 1% 0 0;
padding: 0;
height: 50px; /* if it's products, a height will help them float nicely. if it's text this is a bit harder */
}
li:first-child { /* target the first list item - your selector should be more specific than this or it will affect more than what you intend it to affect */
font-weight: bold;
}
This CSS isn't perfect. If your list items are just text, some are bound to wrap, and that will mess with the floats (hence the height). It also puts list items like this:
1 2 3 4
5 6 7 8
If you're after this,
1 3 5 7
2 4 6 8
you may be better off looking into using CSS3 Columns, but before you do, check out the browser support.
Edit: If you use the float technique, you'll also need to clearfix the ul
element.