CSS: Flowing List

By Xah Lee. Date: . Last updated: .

The HTML list can have a flowing appearance by setting the following CSS:

Here is a flowing list.

Here is HTML:

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

Here is CSS:

ul.flowlist05781 li {
display: inline;
list-style-type: none;
margin: 8px;
outline: solid thin grey;
}

You can also use display:inline-block.

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

HTML list