CSS: Flowing List

Xah Lee, 2010-03-03, …, 2013-03-17

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

Suppose you have a list:

• Cat
• Dog
• Bird

Here's the code:

<ul>
<li>Cat</li>
<li>Dog</li>
<li>Bird</li>
</ul>

But you want to have them flow.

Flowing List Items

For example, if you want it to flow like this:

• Cat
• Dog
• Bird

Solution

Here's the HTML code:

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

Here's the CSS code:

ul.myflow li {
display:inline;
list-style-type:none;
}

you can also use display:inline-block.

To make it nice, you can also add margin:1ex, padding:1ex, border:solid thin red, and others.

Removing Lisp Bullets

To remove the default bullets, we use list-style-type:none.

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