Recently the HTML <ul> & <li> tags have been revived, they are no longer just used for lists but for menu’s too. Its with this that I am going to try and bring back their original purpose and show you how you can funk them up a little, firstly lets have a look at how they are used;

Using Lists

<ul>
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ul>

This renders as this;

  • List Item 1
  • List Item 2
  • List Item 3

Boring right, but with a little css we can make them look  more interesting, firstly lets remove the those boring bullets;

ul {
list-style:none;
}

List Item 1
List Item 2
List Item 3

Next we will remove the indent;

ul {
list-style:none;
list-style-position:inside;
}

List Item 1
List Item 2
List Item 3

Adding some Style!

Looking better already right, well ok maybe not quite yet, so lets add a more interesting bullet. For this I’m going to use a beautiful tick icon from the Sweetie Icon Set created by Joseph North

Now there are 2 ways in which we can add this as a bullet firstly we can reference the image to be the new bullet;

ul {
list-style:none;
list-style-image:url(*/directory of your images*/);
list-style-position:inside;
}

List-Example

There you go much better right?

Restricting the Lists

OK  so we have established that we can now add some interesting bullets to our lists, but what if we want to restrict the width of the list items, we may want to have 2 lists side by side, or in a column. Lets take a look;

ul {
list-style:none;
list-style-image:url(*/directory of your images*/);
list-style-position:inside;
width:200px;
}

List-Example

Hey! No problem right? This works well because our list items are very short, lets make them a little longer shall we

<ul>
   <li>List Item 1 - but a little longer</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ul>

List Items, too long

There are a number of ways we can combat this, the easiest would be to put a text-indent rule on the <ul> item, however problems arise if the user decides to resize the text. So instead we are going to look at styling the <li> element, lets remove the list-style-image: rule and add some rules for the <li> element;

ul {
list-style:none;
list-style-position:inside;
width:200px;
}
 
li {
background-image:url(images/16-em-check.png);
background-repeat:no-repeat;
padding-left:20px; */At least the width of the image*/
}

List Items Fixed!

There you have it, now you can make your list items as long as you want to and they stay nice and aligned!

Download

Download the source

Other Resources

If you want to learn more about the <ul> and <li> elements here are a few more tutorials and resources

CSS Design: Taming Lists – A List Apart

CSS List Element -  W3C Schools

CSS Lists – Tizag