Listutorial: Tutorial 4 - Horizontal lists - Step 4 - Display inline

The Wayback Machine - https://web.archive.org/web/20090516004451/http://css.maxdesign.com.au:80/listutorial/horizontal04.htm

Tutorial 4 - Horizontal lists

Step 4 - Display inline

To force the list into one line, apply "display: inline;" to the "LI".

Go to Step 5 →


		CSS CODE

		#navcontainer ul

		{

		margin: 0;

		padding: 0;

		list-style-type: none;

		}

		

		#navcontainer ul li { display: inline; }

		

		

		HTML CODE

		<div id="navcontainer">

		<ul>

		<li><a href="#">Milk</a></li>

		<li><a href="#">Eggs</a></li>

		<li><a href="#">Cheese</a></li>

		<li><a href="#">Vegetables</a></li>

		<li><a href="#">Fruit</a></li>

		</ul>

		</div>

Other Max Design articles and presentations
Associated with webstandardsgroup.org