Inline lists

Un- or ordered lists, displayed inline, and comma-separated.

by Nadeesh Peiris

HTML

<div>If I had a paragraph in which I wanted to list several items, such as <ul class="inline">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ul>, I could do so and have those list items appear inline, and comma-separated.  Yay!</div>

<p>Sadly, you cannot wrap lists inside of paragraph tags, so it isn't quite as elegant as I would like, but <em>semantically</em> it does make sense...</p>

CSS

/* make it look nice... */
body {
    padding: 1em;
    font: 100% / 1.62 Tahoma, Helvetica, Arial, sans-serif;
}
p {
    margin: .5em 0;
}
/* make the list appear inline, and kill the icons and margins */
.inline {
    display: inline;
    list-style: none;
    margin: 0;
}
/* make all the list items appear inline */
.inline li {
    display: inline;
    /* make the list stand-out for this example */
    color: red;
}
/* add a comma after each list item */
.inline li:after {
    content: ',';
}
/* but remove it from the last list item */
.inline li:last-child:after {
    content: '';
}
/* and add either 'and ' or '& ' before the last list item */
.inline li:last-child:before {
    content: 'and ';
}