CSS: Flowing List

By Xah Lee. Date: . Last updated: .

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

Here's a flowing list.

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: 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.

JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc