Ultimate CSS List Creation Methods and Examples
CSS list is very useful and vital in web design. There are many uses of Unordered list (<ul>) such as horizontal navigation, vertical navigation, creating a box or any kind of list. In this post we will show you some really useful CSS list methods that you can use to create horizontal, vertical list or CSS list box. You can download all the methods used in this post in single zipped file.
Before we create anything lets see how CSS lists are used:



View Demo | Download CSS List Files
For every list here is the basic HTML layout
<div id="the name of the id"> <ul> <li> Item 1</li> <li> Item 2</li> <li> Item 3</li> <li> Item 4</li> </ul> </div>
Now we are going apply some CSS properties to turn it into a list, which can used for navigation or just a simple list.
display: inline

The first CSS propery we are going to use is inline. This is the CSS default display property and will generate an inline box . There will be no break before or after and flowed as a single inline box. In simple words, they will displayed in one line, rather than two line.
Here are the CSS we are applying the create the first horizontal list
#horizontal_list {
height: 20px;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.45em;
color: #8e9090;
}
#horizontal_list ul {
margin: 0;
padding: 0;
}
#horizontal_list ul li {
display: inline;
padding-left: 5px;
}
Here is how it should look like after applying the CSS id=”horizontal_list” to the HTML

display:inline-block
The same result also can be achived by using display:inline-block. The difference is that inline block generates a block box and all the properties as block can be applied. Here is a visual representation of the difference:

Here is the CSS for second type of list ( height and width are left blank but can be applied if need.)
#horizontal_list_2 ul {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.45em;
color: #8e9090;
}
#horizontal_list_2 ul li {
display: inline-block;
padding-left: 5px;
/*height and width can be added */
/*
height: ;
width:;
*/
}
The result would be same as display:inline unless block properties are added.
float:left
Chris wrote a great post explaining what is float and how it works. One annoying thing about the floats is that you must declare the height or sometime the float has to cleared so the elements below won’t ride up on the side. Regardless, float is one of the most used method for for CSS list. By default the CSS list-style-type is circle. if you to remove it use list-style-type:none property. So, here is the CSS:
#horizontal_list_3 {
height: 20px; /* without the height the elements below will float */
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.45em;
color: #8e9090;
}
#horizontal_list_3 ul {
margin: 0;
padding: 0;
}
#horizontal_list_3 ul li {
float: left;
padding-left: 5px;
margin-left:20px;
clear: none !important; /* Below elements are not allowed to float */
list-style-type:circle;
/*list-style-type:none; */ /* For removing the list type */
}
Here is how it should look when the CSS is applied:

Vertical list
Vertical list are easier to create, but we will show you two different techniques that are useful. First lets see the result and the CSS:

/*-------------------Vertical List 1---------------------*/
#vertical_list_1 {
margin-left: 30px;
}
#vertical_list_1 ul {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.45em;
color: #8e9090;
}
#vertical_list_1 ul li {
padding-left: 8px;
margin-left: 0;
list-style-image: url("bullet_green.png");
}
/*-------------------Vertical List 2---------------------*/
#vertical_list_2 {
margin-left: 5px;
}
#vertical_list_2 ul {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.45em;
color: #8e9090;
}
#vertical_list_2 ul li {
padding-left: 20px;
margin-left: 0;
list-style-image: none;
list-style-type: none;
background: url("bullet_orange.png") no-repeat;
background-position: 0 4px;
}
The difference here is that list-style-image has a default distance from the image to the list text and it can not be changed besides inside and outside value. Whereas, using background and background-position the image can be moved left to right value (x value), up and down (y value). There are also some other value such as : top, bottom and more. Check the W3 specification for all the value.
Box using CSS List
CSS list are also useful for creating box. Most commonly CSS box is used for the footer of websites. The trick behind creating a box is having a set width and height for each <li> element. We also use overflow:hidden property so any text won’t go out of the box . So here is the CSS:
/*-------------- Verticle box -------------------*/
#vertical_list_box {
margin-left: 5px;
}
#vertical_list_box ul {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.45em;
color: #8e9090;
}
#vertical_list_box ul li {
display: inline-block;
clear: none; /* no floating *?
background: #e7f4f8;
width: 280px;
height: 200px;
overflow: hidden; /* hide if the text is too long *?
margin-left: 4px;
padding: 4px;
list-style-image: none;
list-style-type: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
The additional styles are in included file and here is how it should look like.

The are many more techniques that can be used to create beautiful lists. Below are some useful reading and tutorials related to CSS list :
- Listutorial : Step by step CSS tutorials
- CSS Design: Taming Lists
- Sexy Ordered Lists with CSS
- Mike’s Experiments – CSS: List Boxes
- Uberlink CSS List Menus
- Simplify List Margins with CSS
If there are any suggestions or errors in the post please feel free to add it in the comments .








Very helpful, thanks!
A useful guide for the newbies… Good work
Andy Walpole´s last blog : The internet 10 years ago this month – January 2000
Wow I’m glad I found your page. I’ve really enjoyed your post and look forward to your updates.
It’s always fun when you find someone with similar ideas as your own. <3 Keep up the good work!
————————————————————–
http://www.cheapestedhardy.com <3
Yeah, that’s really ultimate list, mate! Keep your work always be awesome like that!
Lam Nguyen´s last blog : WordPress Theme from Scratch – Day 1: PSD
“good post”
Great post! I’ll def refer back to this one.
Morning Copy´s last blog : Future Of Web Design Conference (FOWD) in New York City!
good for beginners…
It is quite obvious – but the comments in the “Box using CSS List” aren’t closed properly !
Nice article !
Thnx
Usefull, thanks for sharing the knowledge!
Useful tips for list styling…thanks
Cool…
This is really helpful.
Some more great CSS help from Desizntech… thanks for the post !!
Great article for CSS newbies!
Design Informer´s last blog : 3 Ways You Can Use a Useless Photo
This list is really useful..
Simran´s last blog : 16 Free Wordpress Themes That Will Make You Forget Premium Themes
Nice and clear explanation. Much thanks
Meyvetabagi´s last blog : How to install Ableton Live Packs
That was very useful indeed!
Eugen R.´s last blog : Aiko and the Christmas Tree
Thanks …
Ibrahim´s last blog : Tayfun’un Doğum Günü – Onur’un Mini Konseri
Very useful…Thanks
Tony´s last blog : Free Fonts: Excellent List of Resources