Flowing List Items

Advertise Here For Profit

Xah Lee, 2010-03-03

This page is a html/css tutorial, showing you how to format list items.

By default, list items are formated like this:

Cat
Dog
Bird

Here's the code:

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

This is plain. Sometimes you have a list of items, but you want them displayed in different format.

Flowing List Items

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

Cat
Dog
Bird

Solution

Here's the html code:

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

<hr style="visibility:hidden; clear:both">

Here's the css code:

li.mystyle { float:left; list-style-type:none;
  border:solid thin red; margin:1ex;}
li.mystyle:before {content:"♥ "}

The trick to make it flow is the float:left. The float means making the content float, and when there are several content that are all floating, they flow in the same way when you have a sequence of inline images (i.e. a sequence of <img …> tags.).

Changing Lisp Bullets

Also, notice that we changed the default bullet into a heart. This is done by list-style-type:none, which means do not automatically add any bullet. Then, we add our own, by li.mystyle:before {content:"♥ "}. This lets you use any unicode character as a bullet.

Stop Flowing

At the end of list, we added this:

<hr style="visibility:hidden; clear:both">

This is because we want to stop the flowing behavior. If we don't use it, anything comes after the end of the </ul> will be placed right after the last list item. The clear:both means clear any previous css float “left” or “right”.

The flowing list is particular useful if you have thumbnails and you want to flow them. For a example, see: Xah's Visual Arts Gallery.

✍