npwsol - 6:15 pm on Jun 26, 2008 (gmt 0)

If you're considering classes as markup, then without Javascript you'll have to mark it up to some extent. With Javascript, you'll have to iterate through each list item and change its font size based on its "value," so to speak, but you semi-alienate 1% of users. Can you handle it?

Also, no need to use floats, sir. That would fix your clearHack problem; simply define both the UL and LI as inline elements and use text-align left. Padding (left and right only) and Line-Height can control the height and width of each element at that point (not sure how well line-height plays when there are many differently sized words on a line).

If you're feeling tricksy and want to center it at non-full element width, make the UL a block and assign some margins to the left and right.

With left-padding and line-height appropriately set, you can also use Javascript to assign a background image. Position it as left center and it will show up in the padding area, removed from the text.

And yes, using one list would be SO much easier, I believe.