Recipe 5.8. Creating Inline Lists

Problem

You want to list items to be displayed within a paragraph, as in Figure 5-15, in which the bold, comma-separated list was generated from an HTML ul list.

Figure 5-15. The list formatted to appear inside a paragraph

Solution

Set the paragraphs before (and, if needed, after) the list:

<h3>  Table of Contents </h3> <p>  As proposed, the contents of the paper will contain the  following sections: </p> <ul>  <li>I'm not the Same Person I was in the Database</li>  <li>Past Breaches of Our Privacy</li>  <li>The Best of Intentions</li>  <li>Whatever Happened to Automation?</li>  <li >The Smart Choice is Not Needing to Make One</li> </ul> <p>  If there are any objections to how these sections are divided,  please let <a href="[e-mail]">Nicholas</a> know about  it. </p>

Through CSS, set the paragraph to display as inline elements, and then use autogenerated content to show the commas between items and the period at the end of the list:

ul, li {  display: inline;  margin: 0;  padding: 0;  font-weight: bold;   font-style: italic; } li:after {  content: ", ";  } li.last:after {  content: "."; } p {  display: inline; }

Discussion

Through this method you retain the structure of lists and paragraphs, but you stretch CSS' capability to present the list inside a paragraph. However, you hide the obvious visual appearance of a list in favor of having the contents placed inside a paragraph.

The critical part of this solution is setting the display property to inline on the list items and paragraphs. By using the inline value, the elements are placed on the same line instead of being separated by whitespace above and below each element.

Note that Internet Explorer for Windows does not support autogenerated content.

See Also

The CSS 2.1 specification about the display property at http://www.w3.org/TR/CSS21/visuren.html#propdef-display.