How to style a horizontal list with bullets between items using CSS?

Question

I'm not sure how to build a horizontal list that looks like this:

Here are the rules:

• There is an unlimited number of items in the list.
• Each item should be on a single line and not wrap to a 2nd line.
• Multiple items can be on a single line if there is space for them to fit
• If multiple items are on a single line, they should be separated by a divider
• The divider looks like a bullet, but it could be an image
• Need it to work in modern browsers as well as IE8+

The thing I'm not sure how to do is to make the bullets appear only between items, and not also before or after each row of items.

Answer 1

For those of you who don't have to worry about IE8, this is as simple as:

ul li { list-style: none; display: inline; } ul li:after { content: " \00b7"; } ul li:last-child:after { content: none; }