Flowing List Items

Perm url with updates: http://xahlee.org/js/css_flow_list.html

(css effect may not show in blogger. Visit the link above to see full effect.)

Flowing List Items

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

Here's how you do it:

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

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

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

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

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.

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.

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs