CSS: Flowing List

This page shows you how to use CSS to flow list items.

Here's a flowing list.

• Cat
• Dog
• Bird

Here's HTML:

<ul class="flowlist05781">
<li>Cat</li>
<li>Dog</li>
<li>Bird</li>
</ul>

Here's CSS:

ul.flowlist05781 li {
display:inline;
list-style-type:none;
margin:0.5em;
border:solid thin red;
}

ul.flowlist05781 li:before {
content:"★ ";
}

You can also use display:inline-block.

Flowing list is particular useful if you have image thumbnails and you want to flow them.