How to formatting a simple <UL> in columns and bolding the first item on its own line

Question

I'm trying to figure out how I can take a simple (long - fifty plus options) list in HTML and apply a CSS style to display the first item in bold for the first row and then having subsequent list items appear in at least three or five columns.

If anyone has a simple example of this I'd definitely appreciate it.

P.S. I'd like to do this for a specific Ubercart 3 product page on my Drupal 7 site - and I'm wondering if this has to be done sitewide or if it can be done for a specific product.

Thank you for your time.

Answer 1

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.