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


CSS

Basics

Selectors

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc