Anne van Kesteren

How to display UL elements as a flat comma-separated list

I told Milo I could come up with something that makes the list use an “&” at the end. Apparently the version I made many years ago did not have any whitespace between the LI elements which makes it a lot easier. This time I created one with whitespace although I did have to use some sort of "hack" (display:block;float:left). Unfortunately Opera does not support the CSS 3 selector :last-child so the example only works in Mozilla based browers on Windows. I am not sure about Safari. It does degrade gracefully in Opera though, it is not really a major problem.

To make the example work in IE as well I used _display:inline;_float:none.

Here is the example: How to display UL elements as a flat comma-separated list. Something that might be a problem in Opera is that it also does not support the + selector so you need to apply clear:both on the next-sibling element of UL yourself.

Comments

  1. @Anne, last time I checked Opera supported '+' selector.

    Posted by PragmaInline at

  2. Actually Moose effectively used it in his CSS Destroy two years ago.

    Posted by Frenzie at

  3. Boy, Safari does something weird here: it separates every word with an ampersand, as if the :last-child wasn't in the selector. Or maybe it treats every LI as last-child ?

    Safari does support :last-child normally, and Opera has supported the + for quite a while :^)

    Posted by Philippe at

  4. You shouldn't have used the ampersand though (use and instead), it is meant to group two words. Read these and see the difference:

    Posted by Robbert Broersma at

  5. The fallback in Opera is quite acceptable, but seeing that & as the last separator in Firefox is indeed a nice touch.

    On my personal site I use display:inline-block; for the list elements, which means I don't have to worry about floats and clears and all that. Downside is of course that it doesn't work in Firefox :)

    Posted by Rijk at

  6. Wow, for a moment there I was sure it wasn't possible... but you proved me wrong. Most impressive!

    Posted by Milo at

  7. Posted by EZblog» Linkdump 16 januari at

  8. It's nice, but too bad it's copied as a list when copy-pasting.

    Posted by chris eidhof at

  9. It's a very cool trick for the semantically keen. I like it very much.

    Possibly the only depressing thing about this is that I've got a 2 & a half month old unfinished entry on my blog which works in the same way. I think there's a lesson in 'finishing stuff' in here something... Excellent example page though, Anne - lovely and concise.

    Although rather breaking class semantics, you can also make these lists appear inline within a block of text by making the previous block level element "inline" as well. It's maybe a bit hackish, but means you can get flowing lists within your text blocks.
    Technically, there's an argument within all this for the HTML spec allowing the use of some list-type within paragraphs...

    Posted by Ben Ward at

  10. Works in KHTML/Konqueror 3.3.91.

    Posted by praseodymium at

  11. Two points I want to note about this otherwise excellent example:

    1. The CSS doesn't validate, and it's not hard at all to make it validating. Kinda regrettable :)
    2. Perhaps next time you could add a styled <pre> section with the CSS you used on the page itself, so that we don't have to check the source. Would be great to see the CSS along with the result at the same time all nice and easily ^_^

    Other than that, good stuff, I like the use of an & for the last item, makes it far more interesting.

    Posted by Faruk Ates at

  12. Since when does the validator support CSS 3? :last-child is not part of CSS 2.1. If you are talking about the two line Internet Explorer hack, I guess you are able to remove that yourself.

    Posted by Anne at

  13. Instead of the underscore hack you can also use a conditional comment for IE, which I think is more graceful because it is a documented feature and it doesn't present validation issues ;)

    Posted by crisp at

  14. I'm using this to make the menus on my website to be.

    Oh, please don't bother looking at that in IE :)

    Posted by The Wolf at

  15. nice stuff, I have a bug report though: when the list is inside a smaller element and the elements need to wrap, the wrap happens before the comma, so you get commas at the start of your line of text instead of at the end.

    I changed the CSS around a bit, but there is still one extra comma at the end before the ampersand. any ideas?

    Posted by Geoff at

  16. Perhaps using li{white-space:nowrap}? I haven't really tested it yet though.

    Posted by Anne at

  17. Anne: The CSS Validator supports CSS3 just fine :)

    Posted by Faruk Ates at