There are two types of lists: ordered and unordered.

This is an ordered list:

1. Monday
2. Tuesday
3. Wednesday
4. Thursday

 

 

 

 

 

 

 

 

 

<ol> <li> Monday</li> <li> Tuesday</li> <li> Wednesday</li> <li> Thursday</li> </ol>

 

 

 

 

 

 

 

 

 

An unordered list is:

• Monday
• Tuesday
• Wednesday
• Thursday

 

 

 

 

 

 

 

 

 

<ul> <li> Monday</li> <li> Tuesday</li> <li> Wednesday</li> <li> Thursday</li> </ul> A HTML Description list <dl> <dt> Coffee</dt> <dd> - black hot drink</dd> <dt> Milk</dt> <dd> - white cold drink</dd> </dl>

Different types of ordered lists

Numbered list:

<ol> <li> Apples</li> <li> Bananas</li> <li> Lemons</li> <li> Oranges</li> </ol>

Letters list:

<ol type="A"> <li> Apples</li> <li> Bananas</li> <li> Lemons</li> <li> Oranges</li> </ol>

Lowercase letters list:

<ol type="a"> <li> Apples</li> <li> Bananas</li> <li> Lemons</li> <li> Oranges</li> </ol>

Roman numbers list:

<ol type="I"> <li> Apples</li> <li> Bananas</li> <li> Lemons</li> <li> Oranges</li> </ol>

Lowercase Roman numbers list:

<ol type="i"> <li> Apples</li> <li> Bananas</li> <li> Lemons</li> <li> Oranges</li> </ol>

---

Diffrent types of unordered lists

 

 

 

 

Disc bullets list: Apples Bananas Lemons Oranges Circle bullets list: Apples Bananas Lemons Oranges Square bullets list: Apples Bananas Lemons Oranges Note: li (line items) are at block level (like a

).

 

li (line items) are at block level (like a <p>).

 

If you want line items (li) to line up horizontally then you will need to tweak the css for the li.

Css

#full_image { margin:0; padding:0; list-style:none; white-space: nowrap; overflow:hidden; position:absolute; } #full_image li { display: inline; } #full_image li img{ margin:0 auto; max-width:100% } Html <ul id="full_image"> <li> <a href="#"> <img alt="" src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" /></a></li> <li> <a href="#"> <img alt="" src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" /></a></li> <li> <a href="#"> <img alt="" src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" /></a></li> </ul>

 

•