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
Page 1 of 3 | Next page