CSS Magic for displaying Drupal's multiple field values with delimiters in panelized pages

This is a simple approach to displaying multiple field values in panels with delimiters. We will create a custom CSS class that can be added to any panel expected to contain multiple field values. Once the class is applied to the panel, we can add CSS to our stylesheet which transforms the default waterfall list into a nicely formatted delimiter separated list.

First, click the cog wheel for the panel you want to apply the styles to and click "CSS Properties". Then input "field-items-inline" in the "CSS class" field and click "Save".

The CSS:

/* field delimiters for multi value fields in panels */
/* force multiple values inline */
.field-items-inline .field-items div{
    display: inline;
}
/* add comma and space after each value */
.field-items-inline .field-items div:after{
    content: ",\0020";
}
/* remove comma and space from last value */
.field-items-inline .field-items div:last-child:after{
    content: "";
}

Aside from the custom ".field-items-inline" class, we are only targeting default Drupal classes. This makes the code reusable for any panel you want to apply the custom class to.