Ultimate CSS List Creation Methods and Examples

CSS list is very useful and vital in web design.

There are many uses of Unordered list

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:


Download CSS List Files

For every list here is the basic HTML layout



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

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

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:

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:

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.

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