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 .