How to Space out Items in a Horizontal List

HTML & CSS
1

I am following the horizontal list example at http://css.maxdesign.com.au/listamatic/horizontal16.htm and it looks good, but instead I want to space the list items out throughout the whole area. In other words, each of the five list items should take up 20% of the area, and there should be almost no space between each of the items. How do I do this? I tried setting li’s width to 18%, but that didn’t work.

2

Hi,

Did you mean something like this?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul.menu {
	margin:0 auto;
	padding:0;
	list-style:none;
	overflow:hidden;
	width:80%;
	background:red;
}
.menu li {
	text-align:center;
	width:20%;
	overflow:hidden;
	float:left;
}
.menu li a{
	display:block;
	border-right:1px solid #fff;
	text-decoration:none;	
	color:#fff;
	height:2em;
	line-height:2em;
}
.menu li.last{
	float:none;
	width:auto;
	zoom:1.0;	
}
.menu li.last a{border:none}
.menu li a:hover{background:blue}
</style>
</head>

<body>
<ul class="menu">
		<li><a href="#"> Menu 1</a></li>
		<li><a href="#"> Menu 2</a></li>
		<li><a href="#"> Menu 3</a></li>
		<li><a href="#"> Menu 4</a></li>
		<li class="last"><a href="#"> Menu 5</a></li>
</ul>
</body>
</html>