Use quote marks to find an "exact phrase"

Print version

print icon

26: Lists

Types of list

There are three types of list:

Horizontal list – Menu bar

A menu bar is nothing more than a list laid out horizontally. By default, list items are 'block' elements, which is why a list is vertical, with items from top to bottom. However, if you change the list items from 'block' to 'inline', they line up next to each other instead of each being on a new line.

The example below shows two lists, identical except that the items in the second one are 'inline' instead of 'block'. Both lists belong to the same class, but the latter also has an ID ('horiz'). In the CSS box on the right you can see the 'inline' styling for the 'horiz' list items (#horiz li). The other styling is there just for looks – to hide the bullets, centre the list and space the list items.

HTML


<ul class="nobullet">													 
 <li><a href="#">Item</a></li>
 <li><a href="#">Item</a></li>
 <li><a href="#">Item</a></li>
 <li><a href="#">Item</a></li>
</ul>
														  
<ul class="nobullet" id="horiz">													 
 <li><a href="#">Item</a></li>
 <li><a href="#">Item</a></li>
 <li><a href="#">Item</a></li>
 <li><a href="#">Item</a></li>
</ul>														  
														  

CSS


.nobullet {
 list-style-type: none;
 }
																
#horiz {
 text-align: center;
 }							
							
#horiz li{	     
 display: inline;
 margin-right: 1vw;
 margin-left: 1vw;
 }
																

More about lists

When you start creating web pages you will soon wish to find out more about lists. This excellent page from Shay Howe may be a good place to start.